There’s nothing quite as frustrating as having your web design cruising along and working great.
… And then you open it up with one of those pesky browsers.
I won’t name any names, I would hate to offend any Internet Explorer lovers out there.
Here’s a nifty way to use the tools built in WordPress to pull browser specific CSS:
Browser Detection and the body_class() Function
WordPress has a decent number of global variables that can be used to detect the browser being used.
Here’s a list of the built-in variables [via WordPress Codex]:
- $is_iphone – iPhone Safari
- $is_chrome – Google Chrome
- $is_safari – Safari
- $is_NS4 – Netscape 4
- $is_opera – Opera
- $is_macIE – Mac Internet Exlporer
- $is_winIE – Windows Internet Exlporer
- $is_gecko – FireFox
- $is_lyn
- $is_IE – Internet Explorer
- $is_apache
- $is_IIS
- $is_iis7
Obviously, the default on all of these is FALSE, except for the condition that is TRUE. So then, if your website is being pulled-up with Firefox, the $is?gecko is TRUE.
So, here’s how you dig into the magic:
Browser Detection Function
You’ll drop this bit of code into your theme’s function.php or a functionality plugin:
[cc lang=”php”] add_filter(‘body_class’,’browser_body_class’);
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = ‘lynx’;
elseif($is_gecko) $classes[] = ‘gecko’;
elseif($is_opera) $classes[] = ‘opera’;
elseif($is_NS4) $classes[] = ‘ns4’;
elseif($is_safari) $classes[] = ‘safari’;
elseif($is_chrome) $classes[] = ‘chrome’;
elseif($is_IE) $classes[] = ‘ie’;
else $classes[] = ‘unknown’;
if($is_iphone) $classes[] = ‘iphone’;
return $classes;
}
?>[/cc]
Obviously, you may not want all of these variables or you may want to add more.
You’ll also notice that I checked the value of the $is_iphone variable in a different IF statement. That is because when browsing with an iPhone, you are also using Safari. Therefore, if I had checked the $is_iphone variable in the first IF statement, either the “safari” or “iphone” class wouldn’t have gotten added to the $classes[] array.
Once you’re up and rollin’, you should be able to check the source code and see something like this:
[cc lang=”php”]
[/cc]Now, here’s how to tweak the CSS:
CSS by Browser Body Class
For simplicity sake, I’ll just show the example given by Nathan Rice. Let’s say your default link style is a red underlined link:
[cc lang=”css”]a {
color: blue;
text-decoration: underline;
}[/cc]
Now, let’s make it so Firefox users have red links. Just add:
[cc lang=”php”].gecko a {
color: red;
text-decoration: underline;
}[/cc]
Easy, right?
Now you can deal with those pesky browser issue with ease!
[via Nathan Rice]
Eric J says
Very cool at least it is not like back in IE6 where you had to completely change you css, for me i only have a few things that don’t position right across browsers where i could use this.
Eric Dye says
Yeah, I’ll be bookmarking this for myself!
Noah says
Awesome, just so you know, you have p tags and br tags in your PHP (in the boxes on this page). That won’t work in real PHP.