If you’ve been doing styling for some time, you have probably run the gamet on IE related hacks, browser quirks, and conditional commenting. Allan Jardine created Conditional-CSS to work around browser annoyances while trying to streamline maintenance. More recently, Lu Wang at Ronin wrote 8 tips for “scaling” CSS development, where he extols a number of CSS virtues for creating scalable and maintainable CSS. Most notably: Rule #4 Don’t put IE specific hacks into their own file.
I can’t agree more.
Except for the most basic of sites, the pain that can develop around IE specific style sheets can be overwhelming. The styling quirks alone are enough to deal with, but shipping these items off to their own stylesheet (most likely to never be found again) can create a maintenance nightmare. Particularly without a true Firebug-like debugger, maintaining styling across multiple CSS files (Break your CSS down is Rule #1 in Lu’s article) and again across conditional stylesheets can be almost impossible. Factor in a team of developers, designers, and time, and you have the perfect recipe for snarly code.
So, what do we do?
We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the <body>).
<body>
<!--[if IE 7]><div id="body1" class="IE IE7 IE67"><![endif]-->
<!--[if IE 6]><div id="body1" class="IE IE6 IE56 IE67"><![endif]-->
<!--[if IE 5]><div id="body1" class="IE IE5 IE56"><![endif]-->
<!--[if !IE]>-->
<div id="body1" class="W3C">
<!--<![endif]-->
/* THE REST OF YOUR HTML GOES HERE */
</div>
</body>
Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.
With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:
#header { overflow: hidden; }
.IE #header { zoom: 1; }
But it doesn’t validate!!!
All I can say to this is so what. The goal of this technique is to create maintainable CSS for cross-browser compatible rendering. It isn’t to achieve a validation benchmark. (Don’t get me wrong, I’m all for the goal of 100% validation. I just don’t think it outweighs the need for readable, maintainable, and scalable CSS structure.)
Giving credit where credit is due
This technique for using conditional comments to create IE specific CSS selectors was born (first used by me) at the company where I spend most of my days - Top Producer. And, much of the credit for it should go to co-ops we had a while back: Roman Rudenko and Oleg Gunkin (guys, if you read this, please send me a link and I will gladly add it to this post).
