Using CSS to Target Multiple Internet Explorer Versions
January 10, 2007 I'm done here, let's go home …This method is outdated. I no longer support any version of Internet Explorer less than 6 - and on this site, since it's not business-critical, I don't even support IE6.
I thought I'd share my method of targeting CSS fixes for multiple versions of Internet Explorer in light of IE7's recent release. It's a two-pronged approach combining Microsoft's proprietary Conditional Comments and various CSS filters.
To start, I follow the Yahoo! Graded Browser Support model and provide a full experience to so-called "A Grade" browsers. This includes Internet Explorer versions 5.5 through 7 for Windows. No support is given to Internet Explorer for Mac. And if you're on a Mac and using Internet Explorer: shame on you!
Each of my XHTML files contains the following:
<link rel="stylesheet" href="/css/screen.css" media="screen, projection" type="text/css" />
Which, of course, links to my main screen and projection stylesheet. That stylesheet then contains the line:
@import'screen-real.css';
As you see, that imports the real screen stylesheet. This syntax is one of many CSS filters and is not understood by:
- Win IE 4.0 - 5.0
- OSX IE 5.x
- Mac IE 4.0 - 5.x
- All NS 4.x
- OSX iCab 2.x
So, right there we've knocked out all IE versions below 5.5. But what to do about IE5.5/6/7 bugs? Microsoft recommends the use of Conditional Comments and they really are the best way to target Internet Explorer in XHTML. They may be proprietary and not part of any W3C recommendation, but they are still perfectly valid (because they're contained in standard XHTML comments).
After the above <link />, I use:
<!--[if gte IE 5.5]><link rel="stylesheet" href="/css/gte-ie55.css" media="screen, projection" type="text/css" /><![endif]-->
This pulls in a file called "gte-ie55.css" but only to versions of Internet Explorer greater than or equal to 5.5. This stylesheet is then organized thusly:
- Rules that apply to all versions (5.5 through 7).
- Rules that apply to IE7 only (preceded by
*+html, which only IE7 will accept). - Rules that apply to IE5.5 through IE6 (preceded by "* html" which IE6 and lower will accept).
- Rules for IE5.5 specifically are imported via the IE 5.5/Windows Band Pass Filter. This rule will import a new file, named ie55.css that contains rules that only IE5.5 will interpret.
I've also created a live example page and a downloadable, zipped example.
It's pretty straightforward and works like a charm. However, now and then you'll provide a hack using the "* html" method, which targets IE6 and lower and you'll need to override that in the IE5.5 stylesheet, often using the "* html" redundantly (or any other method of increasing specificity). Otherwise, I've had excellent luck with this in my personal projects, work projects, and client projects - you might call it a "hack template".