Detecting the browser used and adding a body class

This is one of the snippets that we nearly always add to our sites as it means we can target specific browsers and operating systems using conditional css code.

The code below goes into your themes functions.php file somewhere between the opening and closing php tags and it adds an additional class to your body tag.

function wp_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';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie'.$browser_version[1];
} else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
$classes[] = 'osx';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
$classes[] = 'linux';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
$classes[] = 'windows';
}
return $classes;
}
add_filter('body_class','wp_browser_body_class');

Please note that your theme will have to include the following piece of code where the body starts in your themes header.php, this will need to be within opening and closing php tags

body_class()

CSS Usage

Now to target specific browsers and operating systems you can put in classes such as .ie .yourclassname {styles here}, which will be for all IE browsers. You can also do specific browser types such as .ie8, .ie9 etc. Note that firefox browser is covered under .gecko.

For operating systems you can use .windows or .mac and this can then be combined with the browser class to target a browser on an operating system. For example you can use .windows.gecko .yourclassname {styles here} to target firefox browser on windoes only.

We find this snippet a real life saver especially with IE and its odd way of rendering things, let us know what you think or if you need any help getting it to work.