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?
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.
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.
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.
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?
Hi, I'm Kilian. I make my living building Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Please try it out!
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
We can define easing curves for the transitions and animations on our websites to give them a more natural and subtle feel. But it’s not just animations that benefit from easing curves. Any time there is a transition between two states an easing curve will make that feel more natural and less harsh. For animations and…
For a long time I’ve wanted to like functional CSS systems like Tachyons and Tailwind. The concepts behind them are really appealing to me. Using short names for CSS property:values saves a lot of typing (hello Emmet, nice to see you again!), but more importantly by limiting the amount of design choices you can make,…
By the time it is implemented, CSS support will be much better (I hope). So, only small odds could be solved with these conditional comments. Also, if you add this every browser must have an unique id with version control for the conditional comment. More important: it is not the browser, it is the rendering engine.
A better solution is the candidate recommendation for the CSS3 Media Queries. More control of what you can do with a page. At this moment, most of these Media Queries can be solved using JavaScript (of course in a progressive enhancement way).