You should be able to add this code to any WordPress site. It extends the default body classes to include browser detection. So, if you want to add a specific style for IE6, you can just class it like .ie6 #mydiv { }. I think it’s more elegant than pulling up multiple stylesheets for all the different browsers.
If the code doen’t work right off the bat, make sure your theme uses the body_class() function. Your body tag should look something like this:
1 | <body <?php body_class(); ?>> |
Browser Body Classes Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <?php /** * Extends the body_class(); to include browser detection * Props to Thematic: http://wordpress.org/extend/themes/thematic */ function browser_body_class($classes) { // A little Browser detection shall we? $browser = $_SERVER[ 'HTTP_USER_AGENT' ]; // Mac, PC ...or Linux if ( preg_match( "/Mac/", $browser ) ){ $classes[] = 'mac'; } elseif ( preg_match( "/Windows/", $browser ) ){ $classes[] = 'windows'; } elseif ( preg_match( "/Linux/", $browser ) ) { $classes[] = 'linux'; } else { $classes[] = 'unknown-os'; } // Checks browsers in this order: Chrome, Safari, Opera, MSIE, FF if ( preg_match( "/Chrome/", $browser ) ) { $classes[] = 'chrome'; preg_match( "/Chrome\/(\d.\d)/si", $browser, $matches); $classesh_version = 'ch' . str_replace( '.', '-', $matches[1] ); $classes[] = $classesh_version; } elseif ( preg_match( "/Safari/", $browser ) ) { $classes[] = 'safari'; preg_match( "/Version\/(\d.\d)/si", $browser, $matches); $sf_version = 'sf' . str_replace( '.', '-', $matches[1] ); $classes[] = $sf_version; } elseif ( preg_match( "/Opera/", $browser ) ) { $classes[] = 'opera'; preg_match( "/Opera\/(\d.\d)/si", $browser, $matches); $op_version = 'op' . str_replace( '.', '-', $matches[1] ); $classes[] = $op_version; } elseif ( preg_match( "/MSIE/", $browser ) ) { $classes[] = 'msie'; if( preg_match( "/MSIE 6.0/", $browser ) ) { $classes[] = 'ie6'; } elseif ( preg_match( "/MSIE 7.0/", $browser ) ){ $classes[] = 'ie7'; } elseif ( preg_match( "/MSIE 8.0/", $browser ) ){ $classes[] = 'ie8'; } elseif ( preg_match( "/MSIE 9.0/", $browser ) ){ $classes[] = 'ie9'; } } elseif ( preg_match( "/Firefox/", $browser ) && preg_match( "/Gecko/", $browser ) ) { $classes[] = 'firefox'; preg_match( "/Firefox\/(\d)/si", $browser, $matches); $ff_version = 'ff' . str_replace( '.', '-', $matches[1] ); $classes[] = $ff_version; } else { $classes[] = 'unknown-browser'; } return $classes; } add_filter('body_class','browser_body_class'); ?> |
I’ve been trying to add mobile detection as well, but haven’t yet had any luck. Any ideas why the following wouldn’t work?
1 2 | } elseif ( preg_match( "/iPhone/", $browser ) ){ $classes[] = 'iPhone'; |
4 Comments
I’m always hesitant to recommend browser based body classes – as it becomes a problem when caching is involved.
I’ve had body class caching issues when working with Drupal, but never with WordPress. WP SuperCache seems detects them fine. Do you know which caching plugins could cause problems? WC3 Total Cache?
I recently switched to this after I saw it on the HTML5Boilerplate: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
That would be the foolproof way to do it- a little more clutter when viewing the code but it would avoid all caching issues.