Hi. My name is Nick Cairns, and I'm a user experience designer/ developer living in Vancouver, Canada where I am Co-Founder at wantering.



Maintainable CSS using IE specific CSS selectors

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>).

<!--[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">

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-. (Update: You don’t need to use a nested div as in the above sample, but could do this same technique on the body tag as mentioned in the comments below.  Also, here is a similar solution using 1 Kb of JavaScript.)

**UPDATE** Recent research has discovered a performance issue in IE8 when using conditional comments around the body tag (or an internal div as in this original sample). For those of you using this conditional comments technique, you should move your conditional comments from the body tag up to the html element - that way IE8 will not block downloads when evaluating the condition.  Read the post and comments (Conditional comments block downloads) from Stoyan Stefanov for greater detail.

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).

Comments (View)
blog comments powered by Disqus