To ensure maximum cross-browser compatibility on your blog theme, you have to be able to detect the browser used by the visitor. Sure, you can use conditionnal comments, but WordPress itself can detect client browser. Let’s see how to do.
Simply paste the code below in your functions.php file:
<?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;
}
?>
Once you saved the file, the function will automatically add a CSS class to the body tag, as shown in the exemple below:
<body class="home blog logged-in safari">
That's all. You just have to take your stylesheet, and add some browser-specific styles!
Credits goes to Nathan Rice for this awesome trick!
If you enjoyed this article, please consider sharing it!
Related Posts
Related Posts
No related posts.Leave a Comment
- ModThemessave 15% off your purchase […]
- Zidalgo Themessave 20% on your order […]
- WooThemessave 20% on your purchase […]
- Autobloggedsave $40 on multi-site licence […]
- Kreative Themessave 50% on your purchase […]
- Smarter Themesave $5 on your order […]
- Classipress Themesave 20% on your purchase […]
- ReviewAZONsave $15 on your order […]
- Headway Themeget 20% off your licence […]
- Gorilla Themesget 10%off any theme […]
Theme & content : Copyright © 2008 - 2010 Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
40 Responses
This is a nice solution – very simple to extend. Any notes on the payload and performance against existing methods?
Thanks for this recipe.
But, seeing that I always format my IDs and classes with a dash in between words i.e. #my-id or .my-class, how do I get this cope snippet to print out the class with dashes in between the words like:
or to even change the class name to something to my own liking?
/sigh
WordPress wouldn’t print the code I tried to insert in the last coment. I’ll try again:
Thanks for this recipe.
But, seeing that I always format my IDs and classes with a dash in between words i.e. #my-id or .my-class, how do I get this cope snippet to print out the class with dashes in between the words like:
home-blog-logged-in-safari
or to even change the class name to something to my own liking?
this is something great. Thanks
Nice little hack. Very useful considering the increasing use of mobile browsers
Nice trick!
BTW, is there any similar way to easily detect the visitor language?
Besides this, WordPress 2.8 now includes it’s own body class. Just use the following function:
<?php body_class(); ?>
Great,
I will try this on my wordpress website.
@TheFrosty That’s what this is. It’s just using the actual filter instead of the template tag.
That’s a nice tip but why would people want to track browsers? Maybe I am missing something.
Nice trick. Like the idea.
The Php code that you mentioned above is really helpful. I have implemented it and the results are very good. Thanks for such a nice post..
Maybe I’m missing it but where are you pulling the browser info from?
Of course, this is only reliable if you can trust the viewer to not spoof the user-agent string.
can you show me an example of how you would use it in your .css file? i’m not sure how to do that.
@shane: you’ll do:
body.safari{
/* this will only be interpreted by Safri*/
}
Hmm. Is it true?
I greatly appreciate this code. Very useful indeed!
Thank you
I’ve seen so many people code portions of their code towards specific browsers, I think it’s a great idea to do it, this code will help aton to achieve this on my own theme =D
Till then,
Jean
Now all Wordpress needs to include is version detection and I can stop including my custom function in every theme i create
Hurrah, great for giving IE6 users an upgrade your browser message
This is good and i learned a method to achieve my goal but this is not 100% usable(as for as i concern). mainly, i use browser detection class to detect different version of IE. If your website looks good in Firefox, 80% chance are your website will be look same in other browser except different version of IE. so as a programmer i need to get browser name as well as version number so i can code accordingly. Is Wordpress has some global variable for browser version?
Trackbacks: