Kilian Valkhof

Random CSS Thought: CSS Conditional comments.

Internet explorer has quite some odd ways to render my CSS. Luckily, the IE Team developed a way to hide certain parts of your HTML for other browsers: Conditional Comments. The only caveat here is that they only work in the HTML. When you use this as it’s commonly used, to link to a special Internet Explorer only-stylesheet, this forces you to request an additional file, thus needing an extra Http request. When optimising your website, it’s best to get the number of Http requests as low as possible. So how can we do both that and serve additional CSS to Internet Explorer?

Conditional Comments in your CSS #

By taking the conditional comments out of the HTML and into the CSS, of course! This means that your HTML just links to one stylesheet and that within that single stylesheet, you can specify additional CSS for Internet explorer only by using CSS conditional comments. This has only benefits: your HTML gets smaller you get greater maintainability because all your CSS is in one file and you save an additional Http request.

The Looks #

Just as the HTML counterpart uses valid HTML comments, I think the CSS Conditional Comments should use the regular CSS comments as well:

/* Comment here */

Combined with HTML Conditional Comments, it would looks something like this:

/*[if IE]/
body {height:100%;}
/*[endif]*/

The part between box brackets would remain the same as usual Conditional Comments, only the surrounding comment syntax would be that of CSS. I think this would be very, very handy for webdevelopers alike.

Proprietary #

Currently, the only “problem” with Conditional Comments in general is that they’re propietary and developed by Microsoft. I think it would be wise to add conditional comments to CSS and formalise it. obviously, the syntax within box brackets would probably be determined by the browser vendors themselves. Nobody wants to type browsers strings there, something that would probably happen if the syntax within the box brackets is formalised too.

And now? #

Both Microsoft and the CSS Working group (or the CSS Samurai) could tinker with this idea. Microsoft is already using conditional comments, so might as well add it to CSS in IE8. I envision that it would be a better addition to CSS2.2 than to CSS3, but that’s just me.

What do you think, would you rather have your conditional comments in your HTML or in your CSS?