A Cool IE HTML/CSS Trick – Conditional Comments

I am continually humbled by the amount of stuff I don’t know in the areas where I generally feel good about my level of knowledge….

Today I learned about conditional comments. This is an IE specific trick, but in my case I’m trying to have different CSS for a certain class so it behaves properly in IE6 and standards compliant browsers. The problem is using .png files that have transparency. IE6 totally botches .png files. But it turns out there is an IE-specific filter (progid:DXImageTransform) that causes IE6 to render a .png properly. An older article at A List Apart describes how to use it, along with conditional comments.

Conditional comments allow IE to display the content between the comments based on an expression. In this case, the expression is testing for the browser version:

<!–[if IE 6]>
<link  rel=”stylesheet” type=”text/css”   href=”ie6.css” />
<![endif]–>

So this code snipped would cause IE 6 to load this custom stylesheet. IE7 interprets the comment correctly and doesn’t load the stylesheet. Other browsers interpret this as a comment and ignore it. Very nice.