CSS Conditional Comments

Conditional comments are Internet Explorer solutions for CSS issues. It let's you apply specific styles to a particular Internet Explorer version. This makes use of a special form of HTML comment that only Internet Explorer processes. Other browsers and the like will discard them.

<link rel="stylesheet" type="text/css"
href="styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"
href="styles.ie.css" />
<[endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css"
href="styles.ie6.css" />
<[endif]-->

In the example above, most browsers will only apply styles.css in the page. However, in Internet explorer, styles.ie.css is also applied with the additional styles.ie6.css if the Internet Explorer version is lesser than 7.

Conditional comments are very useful. However, some developers also have discouraged the use of conditional comments. They prefer to use CSS hacks like * html for some reasons such as:

• Adding extra HTML markup like conditional comments to your pages to solve a CSS problem is not a good practice.


• Conditional comments will separate IE-tailored CSS code from your normal CSS. This makes it difficult to see the styles applied to a particular element quickly.


• Conditional comments are hard to work with when you are working with many development tools like W3C CSS validator since they are invisible to these tools.

Some developers prefer to use CSS hacks as the clean solution to making CSS apply to Internet Explorer browsers prior to 7. The * html hack can be used in the following way.

div.thingo {
float: left;
margin-left: 1em;
}
* html div.thingo {
display: inline; /* Fix double float margin in IE6 */
}


In Internet Explorer 6 and earlier, the browser will assume that the html element has a parent because of the universal selector (*) that will match to it.

The good thing about this hack is that the CSS code is a perfect valid CSS code. It simply makes use of the bug in IE6 to process it that way.

Afterall, it just depends to personal preference as to which solution is the best. However, if there's a need to apply CSS to IE7 and not other browsers, conditional comments is the best bet because a clean CSS hack has yet to be discovered.