CSS hacks are here to stay but lets bundle them up in a single style-sheet…

After trying to “hide my shame” [was it Zeldman that turned me on to CondComs with this phrase?] by using conditional comments for IE specific hacks, I’m now happier with the new and revised and reverted wisdom that throwing all your CSS code into a single style sheet is best.

I’d read Meiert’s «CondComs are bad» article ages ago but I was still a print designer by trade so the message went into a back drawer in my mind. It’s a good read on the cons and it’s updated too.

For a while I have found elegance in removing offending and non-valid CSS code to fix bug for IE, particularly as a way of dealing with proprietary MS code when incorporating PNGs with full alpha transparency into IE6. I’ve since moved away from trying to make png24 work with IE6; and then came the speed demons and calls from the gallery for fewer HTTP requests.

Avoid Extra Stylesheets

• Fewer HTTP requests = quicker site (particularly for the majority IE crowd that need the hacks)
• All code is kept together for easy reading. ‘Cos we al know that code is read more than it is written…
• And lastly; the typical, for me, extra-ordinary reason: no more 404 errors sent to me from my better 404 page indicating phantom strangeness for style-sheets linked to through conditional comments when there’s an .htaccess versioning rule.

Hide my shame.

The only reason I was still using conditional comments was because I had failed to find an IE-7-only selector hack. Thanks to Web Devout. Look there for the comprehensive list – for posterity I copy paste here:

CSS hacks in CSS Selectors

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}