IE conditional comments

Whilst I’ve become aware that YUI and others prefer to exploit CSS parser bugs to target specific versions of IE I prefer the use of IE conditional comments. I recognise the former offers the maintenance benefit of having IE declarations within the same rule as standard declarations but it still feels too hacky to me.

I also like the idea, should the day come, that IE support might be dropped; having separate stylesheets would make this satisfyingly easy and wouldn’t result in a handful of redundant declarations interspersed with standard declarations.

With this being said I wanted to share my approach to including CSS with IE conditionals as I often see this handled in very different ways:

<!--[if lte IE 7]>
	<link href="/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]--> 
		
<!--[if lte IE 6]>
	<link href="/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Firstly I won’t ever direct to IE8 or above unless under exceptionally exceptional circumstances so it’s just IE6 and 7 that are being directly considered.

Secondly I feel the ‘less than or equal’ operator is the best approach as, in my experience, all IE7 fixes also apply to IE6 - if they don’t it's possible you're not fixing the bug but merely suppressing it. If the ie7 stylesheet was directed to IE7 and only IE7 these fixes would then have to be duplicated in ie6.css creating redundancy and therefore reducing the codes maintainability.

Also, although more of a side effect, this approach will mean the IE7 and 6 rules will be applied to even older versions of IE which is probably going to be better than just providing the standard CSS.

The only real drawback I can see with this approach is the fact that IE6 will take on an extra two http requests instead of the one but I’m not sure this outweighs the negative impact the otherwise duplicated code would have on maintenance.

Checkout QuirksMode for more syntaxical details of IEs conditional comments.