- b2evolution CMS Support Forums
- Archives
- Obsolete Forum Threads
- Neat trick - php and CSS
1 isaac Jul 17, 2004 10:49
Wanna do some sort of browser-detecting in your skin to fix a bug that only appears in Macintosh IE, without resorting to ugly and unreadable CSS hacks?
Hidden in the bowels of b2evolution (in _vars.php, actually) there's a bit that goes like this:
// browser detection
$is_lynx = 0; $is_gecko = 0; $is_winIE = 0; $is_macIE = 0; $is_opera = 0; $is_NS4 = 0;
if( !isset($HTTP_USER_AGENT) )
{
if( isset($_SERVER['HTTP_USER_AGENT']) )
$HTTP_USER_AGENT = $_SERVER['HTTP_USER_AGENT'];
else
$HTTP_USER_AGENT = '';
}
if( $HTTP_USER_AGENT != '' )
{
if(strpos($HTTP_USER_AGENT, 'Lynx') !== false)
{
$is_lynx = 1;
}
elseif(strpos($HTTP_USER_AGENT, 'Gecko') !== false)
{
$is_gecko = 1;
}
elseif(strpos($HTTP_USER_AGENT, 'MSIE') !== false && strpos($HTTP_USER_AGENT, 'Win') !== false)
{
$is_winIE = 1;
}
elseif(strpos($HTTP_USER_AGENT, 'MSIE') !== false && strpos($HTTP_USER_AGENT, 'Mac') !== false)
{
$is_macIE = 1;
}
elseif(strpos($HTTP_USER_AGENT, 'Opera') !== false)
{
$is_opera = 1;
}
elseif(strpos($HTTP_USER_AGENT, 'Nav') !== false || preg_match('/Mozilla\/4\./', $HTTP_USER_AGENT))
{
$is_NS4 = 1;
}
if ($HTTP_USER_AGENT != strip_tags($HTTP_USER_AGENT))
{ // then they have tried something funky,
// putting HTML or PHP into the HTTP_USER_AGENT
$Debuglog->add( 'setting vars: '.T_('bad char in User Agent'));
$HTTP_USER_AGENT = T_('bad char in User Agent');
}
}
$is_IE = (($is_macIE) || ($is_winIE));
What does that mean for you?
It means that the script (probably!) knows what kind of browser the user has!
Wanna use that in your css?
Easy.
First, you'll probably want to come up with a handful of styles that are going to be used between all browsers, and a handful that should only go to one browser or another. (This could mean two completely different stylesheets, or one shared stylesheet and one just for IE or Mozilla.)
Second, put your styles into different CSS files. (Due to the cascading nature of CSS, you can probably do it in 2 files to provide stuff that only one browser sees. Define everything for both browsers in one file, and then put the special IE-only or Mozilla-only changes in a second file.) Save your CSS files in the skin directory that you're working with. (For example, skins/custom.) It might be a good idea to just add some bright red borders in the second file the first time around, to make sure that the browser detection works and to get the feel for the whole concept.
We're ready to change the _main.php file. Find the LINK or STYLE tag in _main.php (or your template). It may look something like this:
<link rel="stylesheet" href="custom.css" type="text/css" />
Or, it might look like this:
<style type="text/css">
@import "./custom.css";
</style>
Let's say that you had a "default" set of styles that any browser could handle. Then, however, you decided to add some CSS tricks that Mozilla/FF handle wonderfully, but IE and Opera don't support, or support badly. You could put all the tricky Mozilla-only stuff in mozilla.css, and the "default" styles in custom.css. In your _main.php file, you'd do this:
<link rel="stylesheet" href="custom.css" type="text/css" />
<?php if( $is_gecko ) // mozilla == gecko
{ ?>
<link rel="stylesheet" href="mozilla.css" type="text/css" />
<?php } ?>
IE users will never know what they're missing B)
Want to hide the big pretty graphic and weird layouts when lynx-users visit your page? (Lynx is a text-only browser.) Or, have a JavaScript that only works in IE? There's really no limit to how far you can take this. You can customize your blog to give your different readers a page that is tailored to their preferences, their browser, their needs. Your blog becomes less like a TV commercial and more like a conversation.
=> You could even take this a step further. You can call a .php file with a LINK or STYLE tag just as easily as you can call a .css file - and a PHP script can output CSS code just as easily as it can output XHTML, so the possibilities are endless. However, you can't use the variables above in your CSS/PHP script. It's called as a separate GET request, so it isn't running in the same memory space where _vars.php detects the browser.
It's more more than a little sloppy, but you can do this in your "style.css.php" file:
<?php require_once( dirname(__FILE__) . '/../../b2evocore/_main.php' ); ?>
to initialize the b2evo variables and then you could even have a little blog in the css if you liked!
3 graham Jul 18, 2004 03:24
There must be some though. It's always good to cater for as many users as possible...
I couldn't find out if you are a Mac user or not, but anyway :
I have a website dedicated to a Mac OSX app.
On December 2003 I had an amount of 10242 visitors.
87.04 % of them were not using any version of Internet Explorer.
89.29 % were running Mac OS
8.83 % were running Windows
I personally don't know any Mac user that use IE as its default browser.