How to Use Conditional Comments for Better CSS

I’m a new contributor to the SitePoint blogs and will mostly be covering front-end development and Semantic Web technologies. I’m looking forward to participating in the SitePoint community!

Sometimes it’s the simplest things that go unnoticed for the longest time. Case in point, while catching up on some WSG reading tonight, I saw a link to Paul Hammond’s Conditional classnames for Internet Explorer. In a sentence, he shows how using conditional comments to customize the <body> element’s class name can be used to simplify CSS selectors for a number of advantageous purposes.

The code Paul showcases looks like this:

[T]his HTML:


<!--[if IE ]>
  <body class="ie">
<![endif]-->
<!--[if !IE]>-->
  <body>
<!--<![endif]-->

with CSS that looks something like:


div.foo {
    color: inherit;
}
.ie div.foo {
    color: #ff8000;
}

So simple and yet so potentially powerful. Some of the advantages to using this, a technique that’s been technically available since the inception of IE’s conditional comments “feature” since IE5—albeit not used widely, if at all—include:

Avoiding the need for an extra IE-only style sheet, improving site performance by reducing HTTP overhead (as Paul mentions in his post).
Eliminating (traditional) IE-specific CSS hacks from style sheets entirely. This could be accomplished by using more specific conditional comments with a wider set of class names. For example, the following code could be used to specifically identify IE7 in the HTML:
```



  <body>

```
in which case CSS selectors prefixed with either .ie or .ie7 would be able to target it.
Other technologies (beyond CSS) that interact with the HTML document will be aware of their IE-specific environment. JavaScript springs to mind. Yes, yes, I know browser sniffing is much worse than capability-based object detection, but the fact remains that sometimes IE won’t give you “the whole truth and nothing but the truth….”

There are certainly a number of “philosophical” or “stylistic” points to be made with such a technique, such as that segregating hacks into their own files is a good thing for maintainability. My personal opinion on such things is that a hack should be made as obvious as possible so you fix it at the first opportunity you get, rather than forget about it. This is why I’ve long preferred to put the * html hack to target versions of IE less than 7 directly after the CSS rule they are overriding, but again, this is often a stylistic choice.

I almost feel bashful to admit that I’ve not encountered this technique before. Of course, that fact alone tells me that it’s entirely possible to implement high-fidelity web designs successfully without this technique. Nevertheless, the notion of conditional class names for IE certainly raises some interesting questions with regard to how IE-only code may be simplified, and I think any technique that improves code comprehension is worth at least a second look.