Serving Up IE Specific Stylesheets
May 17, 2006, 7:31 PM | 0 Comments
Yesterday Nathan Smith posted a few thoughts on using CSS hacks (specifically the * html hack) inside your main stylesheets. There has been a lot of talk recently on what’s going to happen to sites that use a lot of IE specific hacks once Internet Explorer 7 is officially released, and the consensus is that it’s best to serve up specific stylesheets for IE and leave out hacks all together.
I whole-heartedly agree with this opinion and have been practicing this technique for a while now. If you’ve read my article on how to use transparent PNG images in IE, you should already be familiar with these methods. I realize that this is not a new technique that I’m posting, but for those of you who haven’t seen it on this site or anywhere else on the web before, I thought it would make a nice addition to my collection of CSS Tips.
Internet Explorer allows something called ‘Conditional Comments’ which essentially lets you detect the version of IE without using JavaScript. If you’ve ever done any programming before, conditional comments work a lot like general IF statements. Here’s a look at the code:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="YOUR_IE_STYLSHEET.css" />
<![endif]-->
That’s all there is too it, just one simple statement that checks to see if the version of Internet Explorer is less than or equal to IE 6. Less than or equal to is what the ‘lte’ part of the statement stands for. After that check, it’s just a matter of including a call to your IE specific stylesheet the way you would call any other external stylesheet using the <link> tag.
One thing to keep in mind is that these conditional comments are IE proprietary statements, so you won’t be able to use them to detect versions of Safari, Opera, Firefox or any other browser.
Also, in case you’re interested, Nathan Smith’s original article that I was referring to can be found here.
UPDATE, October 20, 2006: Internet Explorer 7 was officially released 2 days ago and while it’s definitely a step in the right direction, it’s still not up to par with its CSS support. Luckily, IE 7 still supports conditional comments to feed it yet another separate stylesheet. So, if you’d like to serve up a stylesheet for only IE 7, here’s the code:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="YOUR_IE_7_STYLSHEET.css" />
<![endif]-->
Posted in: Code, CSS, CSS Tips, Web Development, Web Standards