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!
Related Posts
Related Posts
No related posts.Leave a Comment
WP Theme of the week
WPRecipes.com is hosted by VidaHost. Use our exclusive coupon CATSWHOCODE to get a 10% discount on hosting! 
On Twitter : Clean, stylish and modern WordPress theme, ideal for any business, creative, freelancer, photography or designer.
http://t.co/3Qhd8crRny
Copyright © 2008 - 2013 WordPress Development by Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
3 Responses
This is a great tip. I wasn’t aware that WP had the is_XX to check for browsers. Thanks.
simple and easy tip but with great results.
Thanks for this one!
This can detect any mobile device?
Trackbacks: