Comments on: How to Use Conditional Comments for Better CSS

By: Arkh

Arkh — Tue, 18 Nov 2008 09:48:36 +0000

I discovered this technique in a post on stackoverflow : I love it and started using it. One valid CSS file at the cost of some markup to add in the header and the footer is awesome.

By: Serge Krul

Serge Krul — Mon, 17 Nov 2008 22:41:21 +0000

@tactics

Your answer signifies that you did come across ie’s shortcomings in your development. I also understand from your answer that you used some hacks in your main css file to work around them.
In this case it’s just a matter of personal preference, not bad/good practice: you prefer to let every browser download all the css, regardless of it’s validity or necessity, and i prefer to use conditional comments to serve the “ugly” stuff only to those who need it.
However, and this is my point, in some medium-scale projects it can become complex to maintain the conditional files. Therefore the little trick presented here is really nice for such cases, as I mentioned earlier.
As to your last point, you completely misunderstood me. I never ever wanted to imply that js sniffing is reliable. On the contrary, what i said was that if you use this technique you don’t need to use js sniffing because the so-called sniffing is done at html level by the conditional comments. You’re just checking if the className property of the body element contains the string “ie”.
For some reason you also decided that i rely on js for presentation while i only mentioned using it for suckerfish menus. I’m always cautious about jumping to conclusions about other people’s code.

By: tactics

tactics — Mon, 17 Nov 2008 20:47:44 +0000

Hi Serge. In answer to your questions:

1. I don’t use the IE png fix. I rarely use transparent png’s because their file size is larger than gifs. If it is necessary for a particular project, I use a gif for IE, and a png for “real” browsers using the !important declaration in my stylesheet. If you view any of the lightbox popups on classmates.com, you will see an example of where I did that. It just looks a little less fancy on IE6 than it does on other browsers.

2. The no max-width/max-height thing can be addressed using the “width: expression” hack: http://www.cameronmoll.com/archives/000892.html
It’s not very elegant, but it works. None of the other issues you mention have ever been a problem for me.

3. Browser sniffing with js is NOT more reliable. 10% of people have js disabled. And relying on js for your presentation is contrary to the whole concept of separating your functionality from your content and presentation: http://www.sitepoint.com/article/simply-javascript/

By: Serge Krul

Serge Krul — Mon, 17 Nov 2008 08:33:33 +0000

Maybe for a simple web site you can do with one conditional stylesheet, but when you design something bigger you end up with at least four files: (ie6,ie7) x (css,js). The maintenance of such a mess is horrible. The files sometimes reside at different places, and when you edit your main css/js file you can never know what ie mess is hiding somewhere. You need to leave comments in your main css/js. And when something in those conditional files is altered you need to update those comments. A nightmare. This technique saves you a big mess cause you can put all your stuff in one file. Yes, the good browsers will have to download more code. But the extra code is a lot smaller in proportion to the extra maintenance work you need to do. I would also like to ask the people above me who do not use any hacks how do they deal with no png, no hover, no max-width in ie6, hasLayout bugs (specifically a.p offsets mess and jumps on hover), 1px round bug, ie's own z-index model and other peculiarities. As for browser sniffing in js, this method is much more reliable than anything else because actually the sniffing is done at the html level by the conditional comments, you only need to check the className of body and execute any needed ie code (like suckerfish menus for example).

By: tactics

tactics — Fri, 14 Nov 2008 09:11:20 +0000

I’ve never had to use conditional CSS to get IE7 to behave. In cases where I need to do something different for IE6, I just use the “!important” statement in my external CSS file and that does the trick. I’ll agree with others here that the method suggested here is a bad practice.

By: dmwalk

dmwalk — Thu, 13 Nov 2008 20:19:56 +0000

I see no reason to use this over a simple ie (or ie6, etc.) style sheet with conditional comments in the head. Not only do you have to repeat the conditional markup multiple times in your html, you then have to generate new classes in your css which get mixed in with your non-ie classes. When ie6 goes away, hopefully in another year, you have a mess to clean up in both your html markup and your css stylesheet. I don’t see this making any sense to use.

By: Stormrider

Stormrider — Thu, 13 Nov 2008 09:13:50 +0000

I don’t like conditional comments at all… I like my HTML to be pristine and leave all the messiness to the CSS! After all, the HTML document is the one containing important semantics, which will be used by far more user agents (screen readers for example) than the CSS.

I prefer to keep dirty hacks out the HTML.

By: Tyssen

Tyssen — Thu, 13 Nov 2008 03:10:59 +0000

I wouldn’t go down the route of creating conditional markup for different versions of IE in the HTML, but I did try out this technique just this week as I only came across it the other day too (must’ve seen it in the same place you did ;).

By: Meitar

Meitar — Thu, 13 Nov 2008 01:17:41 +0000

It’s certainly possible that this is too little too late with regards to dealing with IE bugs, though if I’d learned this technique as a CSS newbie rather than the multitude of various (and insanely complex) CSS hacks I’ve used for years, this may have been the method I stuck with in those situations where an IE-only hack was simply necessary. I find it simpler in general and simplicity is generally what I’m after.

By: Alex

Alex — Thu, 13 Nov 2008 00:03:02 +0000

Otherwise you have nothing better ?