Grow your CSS skills. Land your dream job.

Downlevel Hidden / Downlevel Revealed

Published by Chris Coyier

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]> 
   HTML 
<![endif]-->

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]> 
  HTML 
<![endif]>

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]><!-->
  HTML
<!--<![endif]-->

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.

Comments

  1. Hurrah for the days of no conditional comments! That will be a day when standards are true, and no more slagging off IE will be needed.

  2. Permalink to comment#

    Yeah, IE isn’t going to become useful until they adopt a simple auto-update policy like chrome has and firefox is working on. Can you imagine working on ie in 2020, which is what we’ll be doing? It’s going to suck in the same way that compliance for currently modern websites.
    The days when a web browser/renderer can be made and then left as a snapshot in time are behind us, but the code and then leave it approach is still very much alive.

    Here’s to another decade of non-compliance.

    • Permalink to comment#

      Right, right, via microsoft auto-updates. But not “security patches” to the browser itself, weirdly, according to that article. Not sure how to feel about that, obviously chrome works as a stand-alone self-updater, which means that the numeric version of chrome matters very little and will move on quickly, which is good. So people on XP may get updated to ie8, everyone else will get updated to ie10, but won’t get security patches & renderer patches automatically?

      Obviously any update mechanism is better than none, so it’s good to consider that if all goes later this year, anyone still using ie6, ie7 at least will be doing so explicitly by choice, the crazies.

      We need to move beyond the idea of browsers that “stick” at certain version numbers and don’t continue forward, what a disaster in general, and I’m glad that Chrome has shown us a better way.

    • Permalink to comment#

      so you are saying that people on IE6 and IE7 will be notified there is an upgrade and be allowed to upgrade to 10?

    • Permalink to comment#

      No.

      According to the article, people on XP who haven’t already rejected certain update settings will be notified (or just updated, not sure), from ie6 and ie7 to ie8 (the latest ie version that works with XP).

      People on vista/windows7 with get updated to the latest stable version, whatever that is.

      That’ll only happen in the US if an when microsoft decides to roll it out there, right now they’re doing it as a trial in australia & brazil.

      Again, that’s all according to that article, I don’t even run windows myself.

  3. Permalink to comment#

    …err, that should have said: it’s going to suck in the same way that ie6 sucks for modern sites now.

    Mobile keypad, what can I do.

  4. Thanks for the nice article. I realized there are many ways to go when hacking IE and neither conditional comments or css works better it all depends on the designer.

    
    <!DOCTYPE html>
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
    
    

    Now IE9 seems very standards compliant and I do like it but it still has some areas where it lags behind. These include support for WebGL so dropping the conditionals would be welcome only if the small issues are sorted. Designers will not just trust IE blindly it has been so costly

  5. Tim Okrongli
    Permalink to comment#

    I find that even IE9 is lacking in areas as basic as the box model. I recently had to do a funny little dance to get a dropdown menu to behave in IE. It turned out that we managed to hit the old “boxes always expand to contain their content” bug, which I believe should have been fixed after 7.

    Now, Microsoft might have turned a new leaf but with IE9 managing to get even the box model wrong it seems that the only thing that would get me to respect IE would be if Microsoft finally abandoned Trident in favor of a more mature rendering engine.

    Of course, decoupling IE versions and Windows versions would help, too.

  6. Why oh why are Microsoft removing Conditionals?

    Surely 5 years from now there’ll be some quirk that we need to use conditionals on IE 10 for?

    Additionally I was under the impression that conditional comments were for forwards and not backwards compatibility?

    Fire them out of a cannon!

  7. Permalink to comment#

    Ummm, I don’t get it. Why is Micro soft getting rid of conditional comments good when we still need them to support clients with old browsers that don’t render correctly? Am I missing something?

    • Andy
      Permalink to comment#

      The old browsers are still going to support conditionals. He’s just saying IE10 won’t respond to something like:

      <!--[if IE 10]>Only IE10 will see this<![endif]-->
    • Permalink to comment#

      Ok, thanks for verifying that. Hopefully this is because they plan on being fully compliant now. I cant wait to not have to support IE6. I had this issue the last 2 sites Ive done and I think Im gonna make a stand and just stop supporting it in my work. Sorry. We as developers need to take the lead here. We are the 100% who create these sites anyway. Lets just say no. Start a say no day and that will be the day we stop all support. we get the media to chime in and everyone is informed they need to get an upgraded browser by then or else.

      Stepping off soapbox :-)

  8. Daniel Waltz
    Permalink to comment#

    As a user of IE10 on a Windows 8 tablet I can safely say we will no longer need to worry about IE in the future. Woohoo! They got this one right. In some cases it even performs better with transitions.

    For you tech geeks out there an Intel Atom tablet running IE10 can outperform an i7 Sandy Bridge Mac using Firefox/Chrome. That’s pretty substantial in my opinion.

    IE9 is still great too as a matter of fact… just doesn’t have the transitions.

    • Nojan A.
      Permalink to comment#

      but it doesn’t change anything… there is always a bunch of people using older versions of IE . so for designers it’s still a pain in the ass :|

  9. Permalink to comment#

    Thanks for this information.
    Waiting for IE 10 roll out…
    :)

  10. Permalink to comment#

    Great to know these Chris, I have actually been getting stumped by this very problem the last 2 days. IE is a B!tc@! Will be putting these into production asap lol.

  11. thank you for the useful information i am waiting for the IE 10 version

  12. I don’t get it. What is it for? HTML is a markup language, what’s the point of entering programming directly into HTML? There is JS, ServerSide scripting and I even understand smarty, but this… I think it’s absolutely useless

  13. Permalink to comment#

    As you noted at the outset, I was one of the folks struggling with conditional comment issues. Thanks for laying out such a clear explanation.

  14. harrypujols
    Permalink to comment#

    I have a site that the layout is fine in all browsers but IE 10. Turns out that IE10 needed the same conditional styles I set for the older IE browsers. So, in my opinion, it was a bad idea they dropped the conditional comments.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".