WordPress IE6 Detection and Targeted CSS

Today I needed to fix up a few things on a new site I’m publishing due mainly to the Internet Explorer 6 PNG transparency issue. Previously I’ve had success with at least one of the fixes provided by Adam Erstelle’s HITS- IE6 PNGFix plugin. Unfortunately, none of them really did the trick this time with the various ways in which I’d used PNGs on the page. The site looked great in Firefox 3, Chrome, Safari, IE8, and IE7, but, oh wait, the infamous IE6 really screwed the pooch again.

I decided that I wanted to use CSS styles and specifically target the divs and PNGs that were giving me problems. Of course, to do this without Internet Explorer hacks, this meant manually detecting IE6.

Now, I could do this either server side or client side. I think client side may be more reliable (using jQuery), but server side (PHP) is more efficient – that is, by taking care of the problem server side we cut it out at the root. My goal was to add a new class to the body tag depending on the browser and then target the HTML elements using that class only when the browser was IE6.

I found several solutions that came close, mostly based on Nathan Rice’s browser detection trick.  This was a great start for me.  Basically, you can plug this function into your theme’s functions.php file (I use the Thesis WordPress theme, so it’s actually custom_functions.php for Thesis users), and it will add a filter which adds new classes to your body tag based on the browser.  This is Nathan’s solution, which leverages WordPress’s global variables already in place:

<?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;
   }
?>

Great! Now I know what browser I’m dealing with. But IE7 and IE8 work without any problems with my cross-browser compatible CSS, and I don’t want to mess with those – I want to specifically target IE6. So after I determine that we’re dealing with IE, let’s check the version.

You may be able to use the php get_browser function, but only if your server is properly configured (if it’s not, and you don’t have access to your own server configuration, you’re SOL). That function basically parses everything out neatly for you, but we don’t need to get that complicated. A less finicky way is just to rely on PHP’s $_SERVER['HTTP_USER_AGENT'] variable.

Now, this thing is a beast. This is what it looks like for IE6:

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR
2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729)

Nasty. But all we really care about is the “MSIE 6″ string. So let’s check for that.

//if the browser contains 'MSIE 6'...
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)

So I updated the original code in order to specifically give me a class for IE6 so I can catch that sucker.

<?php
   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';
         //if the browser is IE6
         if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false){
            $classes[] = 'ie6'; //add 'ie6' class to the body class array
         }
      }
      else $classes[] = 'unknown';
 
      if($is_iphone) $classes[] = 'iphone';
      return $classes;
   }
   //this is for Thesis.  For basic WordPress use 'body_class' instead.
   add_filter('thesis_body_classes','browser_body_class'); 
?>

Now, I could have just used my own code without all the WordPress variables, considering all I really care about is IE6, but this way I’ll have classes to detect other browsers if I need to in the future. Note that for IE6 there will be two classes – ‘ie’ and ‘ie6′. The function needs to be set up as a filter for the body tag. If you use Thesis like me, use ‘thesis_body_classes’ as the hook for the add_filter function. If you’re using basic WordPress use ‘body_class’ as the hook, as Nathan describes in his original article (see here for a more in-depth explanation).

So now my body tag looks like this:

<body class='custom portfolio ie ie6'>

And I can write CSS styles like this:

.headline_area h2{
  font-weight:bold;
  font-style:italic;
  color:#422506;
  background:url(images/wood_headline.png) no-repeat;
}
body.ie6 .headline_area h2{
  background:transparent;  /*Get rid of the PNG I was using as the bkg*/
}

Sweet! Now I can fix just the problems that IE6 was having without messing with my good, clean, valid CSS. Awesome. No IE Hacks needed.