[IE Hacks] CSS Conditional comments

[Jen]

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Conditional comments work as follows:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
2. Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Example

Below I added a lot of conditional comments that print out messages according to your Internet Explorer version.

Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0).

Test

Below are a few conditional comments that reveal the Internet Explorer version you're using. If you don't see any, you're not using Internet Explorer.

Code

The syntax I use is:

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
</p>

Note the special syntax:

* gt: greater than
* lte: less than or equal to

Originally by http://www.quirksmode.org/css/condcom.html

[Game Makker]

It always hopes to know hoe to use them but these should be a last resort. Whatever it is that isn't displaying or working well, you should always attempt to fix the problem without hacks . There are however occasions this can be almost impossible.

[csshuckster]

I use conditional comments all the time. They should be the first thing you do when styling for IE. Conditional commenting is not a hack, it calls the separate stylesheet for IE to be read by IE or the specific version of IE that the conditional comment is naming.

Conditional commenting has saved my business a lot of time and hours. Nice post Jen.

[jurik]

There's no need to use them in 99,8% of all cases. Try to write a correct code.

[Afty]

Originally Posted by jurik

There's no need to use them in 99,8% of all cases. Try to write a correct code.

I am a Clientside Developer for a large design studio in the uk. I use conditional comments to pull in stylesheets all the time, you can write fully clean and accessible code and still get completely different outcomes across the 3 latest IE versions.

unless you start using * html hacks (which you shouldn't) i can't believe that you would ever get the exact same results across all the browsers.

Assuming any sort of complicated design that is.

[VIPStephan]

Assuming that IE 6 is the lowest version that’s currently in major use and the developer cares to code for, I can second jurik’s post absolutely. If you’re a good developer in 99,8% of all cases you don’t need any conditional comments at all (depending on the complexity of the layout, of course). If you’re using them “all the time” then you’re either too lazy to do it properly right from the beginning or you’re doing something wrong because you don’t know it better.

Before using any IE hack it helps to understand the concept of hasLayout as this is the source of all evil in 90% of all cases where IE does something differently. And you can help yourself without any conditional comments in most cases.

Of course there are cases where you just need them like transparent PNGs and fallback options for even older IEs (which I really neglect by now due to decreasing usage).

[Afty]

Transparent Pngs
Clearfix IE rules
Haslayout Fixes

These are the basics of what goes into my IE6 stylesheets.

If you aren't fixing them there, then you are fixing them in your main stylesheet which not only can lead to more complications but also bloats the size of the main stylesheet. Which means that you are "punishing" users with good browsers by making them download larger files.

Conditional stylesheets all the way baby (also i'm pretty much offended by the implication that i'm not a good developer )

[VIPStephan]

Many hasLayout and clearing issues can be overcome with regular CSS in the regular stylesheet without bloating it or mixing „good“ code with „bad“ code.

For example, rather than the :after clearing method one could go the containing floats way which works in all browsers, or we can apply the “overflow clearing” (for which IE needs layout that can be applied by assigning dimensions). All neat, clean, and valid solutions that can live without conditional comments and don’t really pollute the stylesheet.
In the same way, “layout” can be applied to elements in most cases without compromising tidiness of our stylesheets.

Of course, it all depends on the complexity of the layouts, and I do endorse the use of conditional comments but this also seduces to overuse it in that way that when a tiny little difference appears, immediately “hacks” are applied without investigating the true (and often very simple) reasons for the issue and fixing it properly without CCs at first. I’ve seen it all and it’s a PITA to edit sites where developers applied alleged fixes over fixes and eventually they just made it more complicated.

Sorry for the comment on professionalism. I tend to be very direct with my opinion at times. If you don’t see yourself included then just ignore it. In the end it’s at everybody’s own discretion when to use conditional comments. I’m just appealing to everybody to see conditional comments as last resort and try to fix issues without them first (using “legal” CSS, of course).

[liam.smart]

** ignore - duplicate entry **

[liam.smart]

Nope, conditional statements arent needed unless its for transparent png's.

There is no reason why FF, IE6 & 7 cant look identical using the same CSS.

It cracks me up when i see IE conditional statements and then IE6 underneath them. Thats clearly someone writing poor CSS and taking the quick option to fix it.