Conditional Comments

I talk about about using con­di­tional com­ments to serve a stylesheet spe­cific­ally aimed at resolv­ing Inter­net Explorer unique inter­pret­a­tion of CSS, how­ever, until recently this blog was more a case of do what I say, not do what I do. In the rush the to get the blog up and run­ning I used a couple of hacks, mainly the !import­ant hack to serve dif­fer­ent val­ues to IE and other browsers.

After read­ing Tantek Celik’s Pandora’s Box (Model) of CSS Hacks And Other Good Inten­tions I decided it was about time I prac­tised what I preached. Con­di­tional com­ments are the best way to serve CSS spe­cific­ally to IE. They spe­cific­ally tar­get IE only, all other browsers see the con­di­tional com­ment as a com­ment and treat it as such. So it a clean, effi­cient way, that does not require javas­cript or hacks (that might be inter­preted dif­fer­ently by another browser) and is valid HTML (It is a com­ment to every other browser except IE).

For those of you who have not seen a con­di­tional com­ment in action, here is the code from this page:


<!-- for microsoft browsers -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/xtras/ieonly.css" media="screen" />
<![endif]-->

Added Decem­ber 19: Warn­ing, do not cut and paste this code into your HTML. Word­Press does not handle code the way I (or prob­ably you ) would expect, so get it from this text file (right click and save as).

So all ver­sions of IE get the same addi­tional stylesheet. If I need to serve dif­fer­ent stylesheets to IE6 and IE5.5 and below, because IE5.5 and below uses incor­rect box model while IE6 in standards-compliant mode uses the same box model as every­body else. So the code in your head sec­tion of the page would include.


<!-- for IE6 only -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/xtras/ie6only.css" media="screen" />
<![endif]-->
<!-- for IE 4, 5 & 5.5 -->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="/xtras/old.css" media="screen" />
<![endif]-->

Added Decem­ber 19: Warn­ing, do not cut and paste this code into your HTML. Word­Press does not handle code the way I (or prob­ably you ) would expect, so get it from this text file (right click and save as).

For more on con­di­tional com­ments visit the MSDN Lib­rary.

Updated 10 Decem­ber just mod­i­fied /wp-includes/functions-formatting.php file so — renders as — and not as &#8211

Updated 7 March 2006 typo I missed, and it was a big one, thanks Jen Williams

This entry was posted on Sunday, December 4th, 2005 at 6:18 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.