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 {}

VPC images for ie6 ie7 and ie8 for web development and testing from Microsoft

Microsoft give away free time crippled VHD files for this purpose – search for “Internet Explorer Application Compatibility VPC Image”. Today you will find this link here. Look at that link – SEO urls a-go-go! Gone.

Problem is that getting these images to play nice with VMWare Fusion for Mac is not so straightforward. The only way I’ve found to do this is documented here on the VMWare communities. The result — at least without the required XP Pro install disk which I have packed away in a box somewhere — is pretty good. Not as seamless as the original VirtualPC image I converted but very usable.

An aside… on forcing IE8 to be backwardly compatibile with IE7

…is via a metatag in the head element to ask it nicely to behave like IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

DON’T BREAK THE WEB! They cried. I think there’s ironing in there. Nice starch.