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?
Update: I have written a jQuery plugin that takes care of text-shadow in Internet Explorer, you can read the article here: Text-shadow in IE with jQuery Text-shadow is a neat little CSS3 (actually, CSS2) property that allows you to display a shadow behind your text. The only downfall is that it doesn’t work in Firefox and…
In my…quest..to use as less code as possible, i ran into another random CSS thought. Now, this one is a bit more abstract, and sort of hard to explain, so please bare with my while I try. I’d appreciate it if you would want to point out when any of my descriptions are unclear in the…
After some debate with Prashant from Mintpages, we came up with a new utopia in CSS design. Now, this is just a random thought, but wouldn’t it be awesome to be able to use (simple) mathematics in your CSS? I’m not talking about “new techniques” or anything, just about closing your eyes and imagining all…
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).