In the war on CSS hacks versus IE conditional comments, we’ve always fought on the side of conditional comments and felt good about it. But there has always been one thing that made me jealous of our counterparts on the CSS hack side of the field—having the necessary IE styles in the same place as all the rest. So I did something about it.

Over at GitHub, I have posted a new project called CSS Single File. And what it does is allow you to use IE conditionals in CSS comments. It parses your CSS file(s) looking for comments that looks like this:

div#page{
   width: 940px;
   padding: 20px;
   /* if lte IE 7
   width: 960px;
   */
}

It collects them all, indexing by IE conditional, and spits out the necessary HTML IE conditional comments for you. Currently, it only renders IE specific styles in embedded style tags but it could easily be upgraded to handle file rendering and caching. The real question is whether this approach is worth pursuing with the need for these hacks on their, albeit incredibly slow, way out the door.

What becomes a more interesting question, however, is what if instead of rendering IE conditional comments in the HEAD of your HTML document, the parser incorporated browser sniffing and rendered the IE styles right there in the CSS file.  And if you are doing browser sniffing to filter styles, why not any browser conditional comments. Think about it.

div.some-box{
   border: solid 1px #555;
   /* if FF 3
   -moz-border-radius: 5px;
   */
   /* if Safari 3
   -webkit-border-radius: 5px;
   */
}

Does this approach allow us to deliver exactly the CSS that the particular user needs and target browser specific features and bugs without sacrificing validation? Or does it just encourage bad behavior? Does it make our CSS files more or less readable?

In his highly revered Web tome, QuirksMode, Peter-Paul Koch writes on the topic of conditional comments:

Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I’d have preferred to put the special styles in the CSS file, but that’s impossible.

Of course, he meant that is was impossible to do this using native browser behavior. And, he is just talking about IE. But IE is not the only browser with buggy CSS rendering. And in the age of High Performance Websites when we are already running our CSS source files through a parser to compress them, why can’t we add a feature to make our lives easier while we are at it?