This post is over 6 months old. Some details, especially technical, may have changed.

CSS Hacks for IE - Unnecessary

There are lots of CSS tricks floating aroud to accomodate IE quirks and more specifically in most cases IE6 the problem is these hacks - which is exactly what they are - invalidate your CSS and break future-proofing (what if a another browser learns to understand this hack with different rendering effects?). These things are parsed by every browser that comes across them - the browser then has to attempt to parse it, fail and then carry on - not exactly the most performant styling mechanism! They are useful and often quite nice but aren't exactly self explanatory making them a maintenance nightmare if someone doesn;t understand that order can be very important in these cases.

So - Why hack when a system already exists?

Hello Conditional Comments.

Conditional Comments are a feature implemented in IE (though other browsers COULD implement them if they wanted to but none have). It's a specially marked up HTML comment node (so you include it in your HTML not CSS) that is only parsed by IE. A few examples are below....

<!--[if IE 6]>
IE specific Styling
<![endif]-->

<!--[if IE 6]>
IE6 Styling
<![endif]-->

<!--[if gt IE 6]>
IE7 + Styling
<![endif]-->

So basically you have you all normal CSS link tag then you can include a conditional comment to cater for specifics to IE or some specific version or rnge of versions. OK you would still need hacks for the other browsers but NIWater only had to use IE6 conditional comments (no hacks for other browsers) and looks fine in Chrome/Safari/FF - plus it means you CSS is valid and IE specific CSS is only pulled down by IE slightly reducing page weight (very slightly most likely!!!).

Published in CSS on January 13, 2010