When I wrote the original article on browser targeting with CSS, I knew it was an ugly solution. I didn’t really like it, but – at the time – as an industry we were still dealing with the last remnants of the v5 generation of browsers, and IE7 was only just starting to gain traction. Supporting multiple versions of Internet Explorer was – for those of us who work with clients on a daily basis – a necessary evil.

Fast-forward two years exactly and where are we? There’s a new version of IE firmly in Beta, an established user-base for IE7, and a generation of enterprise computers stuck on IE6 – seemingly forever!

Though this may sound like a ridiculous assertion, it’s actually a simpler browsing environment than it was two years ago. With the new IE=EmulateIE7 compatibility mode support it means that until IE8 is finished, we actually only have two versions of IE to worry about, and that means my new set of filters can be much simpler.

For starters, instead of making concessions for the individual failings of IE5 and 5.5, I now cut them off from styles completely. Clients have been very receptive to this idea, especially when the cost of catering to older versions of IE is made clear. Obviously your clients’ need comes first, and if a client wants IE5.x support, I’m happy to provide it. IE6 and 7 get their styles in the same way as before – via the main CSS file, with overrides for specific problem areas in their own, special IE stylesheet served via one conditional comment.

With all that said, here’s the new version of my file structure:

1. Load <link rel=“stylesheet” href=”/style/master.css” type=“text/css” media=“screen” />



2. In master.css, use the High Pass Filter to send unstyled HTML to IE5.5/Win. However, in the second line, use single quotes instead of double to also filter IE5/Mac. (Instead of @import “highpass.css”; use @import ‘highpass.css’;. I also rename highpass.css to screen.css in order to make it clear to future developers that this is my main screen CSS file)



3. In the HTML, link to the ieonly.css file as before – using a conditional comment – and use the same rules as in my previous post: Rules for both IE7 and IE6 go at the top, rules to override for IE6 only, use the * html hack underneath.


4. Finally, until IE8 comes out of Beta use the new meta tag to force IE8 into IE7-compatible mode: <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7” />. Why spend time hacking around a browser that isn’t even finished? Who knows what will change!

And that’s it. Much simpler than it used to be. Which will probably change the moment IE8 is finalized. But that’s what makes our lives interesting, right! Right?...