Downlevel Hidden / Downlevel Revealed

Avatar of Chris Coyier
Chris Coyier on

Just gonna clear up a little thing here that I’ve seen people struggle with a few times. There are two different kinds of conditional comments for Internet Explorer that have slightly different syntaxes: Downlevel Hidden and Downlevel Revealed (microsoft docs).

Downlevel Hidden

<!--[if expression]> 

You likely know that HTML comments are like this <!-- hi there -->. Now look at the above code. It’s a block HTML comment. You use this kind of IE conditional comment when you want every other non-IE browser to ignore that entire area. As it should, because it’s an HTML comment.

You’d never use this style to do [!IE], for instance, because it wouldn’t actually render the content to non IE browsers.

Downlevel Revealed

<![if expression]> 

See the difference? No double-dashes. These are not HTML comments, thus the content inside is seen and rendered non-IE browsers.

The problem with the above syntax is that it’s invalid code. The HTML validator flags it as a “Bogus Comment.” (♥). So it’s more often written like:

<!--[if expression]><!-->

Which does the same thing but it valid. This is ideal for expressions which include [!IE].

So in short…

Downlevel hidden = Show only in some subset of IE < 10's Downlevel revealed = Show some subset of IE < 10's plus every non-IE browser. If you're looking for a quick reference of all conditional comments, see here.

The End

When IE 10 ships it will not be supporting conditional comments, and the days of specific resources and content to specific versions of IE will begin coming to a close. Thank heavens. While conditional comments were very useful for fixing problems in those older browsers, a much better situation is if there just isn’t problems. I’m sure some folks are nervous based on IE’s track record, but we’ll just have to wait and see. From the looks of things, IE 10 will be extremely good if not most standards compliant browser.