Add the browser name and version to the body class

Posted by: Vincent on: September 1, 2010

• In: Beginner
• Comment!

As suggested by Phil Irish, the best way to make browser specific CSS is with a class on the body element rather than separate CSS files or complex hacks.

In his example he used conditional HTML to create multiple body-tags, but with this simple function you can just add the browser name and version to the classes printed by WordPress’ body_class function.

function mytheme_body_class( $class ) {
 $arr = array(
 'msie',
 'firefox',
 'webkit',
 'opera'
 );
 $agent = strtolower( $_SERVER['HTTP_USER_AGENT'] );

 foreach( $arr as $name ) {
 if( strpos( $agent, $name ) > -1 ) {
 $class[] = $name;

 preg_match( '/' . $name . '[\/|\s](\d)/i', $agent, $matches );
 if ( $matches[1] )
 $class[] = $name . '-' . $matches[1];

 return $class;
 }
 }

 return $class;
}
add_filter( 'body_class', 'mytheme_body_class' );

Modify the array if you want to sniff out even more browsers. Simple enough I think!

Tags: browsers, CSS, html