IE Conditional Comments

By  on  
Internet Explorer

As we all know too well, Internet Explorer is the browser that tends to cause web developers the most pain. Maybe it's because Microsoft currently has 3 very different browser versions we have to account for. Maybe it's because the earlier versions of the browsers didn't adhere to standards. Maybe it's because IE6 wasn't updated for so many years. Whatever the reason, IE is here and we have to deal with it.

CSS and JavaScript issues within each version of IE present us with layout and functionality issues. Double margins, floating and absolute positioning, and lack of PNG support are probably the most frequent problems. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.

Examples of IE Conditional Comments

<!--[if IE]>
<style type="text/css">
a		{ color:#fff; }
</style>
<![endif]-->

The example above sets the color of links to red if the browser is any flavor of Internet Explorer.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

The example above example includes the IE8.js library int the page if the version of Internet Explorer is less than 8.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png');
</script>
<![endif]-->

The example above fixes PNGs if the browser is Internet Explorer 6.

Conditional Comments Syntax Table

ItemExampleComment
![if !IE]The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt[if lt IE 5.5]The less-than operator. Returns true if the first argument is less than the second argument.
lte[if lte IE 6]The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt[if gt IE 5]The greater-than operator. Returns true if the first argument is greater than the second argument.
gte[if gte IE 7]The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( )[if !(IE 7)]Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
&[if (gt IE 5)&(lt IE 7)]The AND operator. Returns true if all subexpressions evaluate to true
|[if (IE 6)|(IE 7)]The OR operator. Returns true if any of the subexpressions evaluates to true.

While we all dislike Internet Explorer's bugs, their conditional comment syntax provides us a perfect method for fixing them quickly.

Valuable Resources

  • If you'd like to cut one of the browser version issues out of the equation, you can always make IE8 emulate IE7.
  • Be sure to check out the MSDN documentation for Microsoft's "official" guide.
  • PPK has some awesome notes about conditional comments.

Have fun fixing your code in Internet Explorer with conditional comments!

Raygun Pulse

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Jack Rugile&#8217;s Favorite CodePen Demos

    CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

Discussion

  1. Keep that Voodoo nonsense to yo’self! :P

  2. Will

    Have you used IE7.js or IE8.js? I haven’t gotten around to testing them, but it looks like they could help in this area.

    http://code.google.com/p/ie7-js/

  3. @Will: Yep, I have used it before. It’s not for every project but it sure is nice!

  4. I use IE8.js and it’s been generally a Godsend except that it doesn’t seem to like playing with my DD_belatedPNG fix.

    I figure it’s better for smaller websites/projects but shouldn’t be used on anything large.

  5. Just take note that when you use the if !IE statement, the format differs, you don’t include the <!– section, only

  6. damn, comment got cut…

    <!– becomes <!

  7. (this is bad) But I’ve said sod it to IE6. IE7+8 aren’t too bad just some off css filters…

  8. I’ve said this before – if I had it my way I would drop all support for IE. I would save a load of development time, which could go to something more important that could potentially be useful to the end user. However since so many people use IE I feel obligated to support it the best I can.

    It’s like the 300 pound bully at school. You really want to shut him up and put him in his place but there is nothing you can do… You’re only a 120 pound skin and bones kid, and would not stand a chance…

    Anyway if you can’t beat IE then I suppose I should be grateful that there are these convenient conditionals. :/

  9. good post. thanks

  10. Michael Bryan

    @Edd Turtle: I’ve also dropped IE6. If a client wants support for it I charge extra.

  11. Supporting IE6 can be very painful :(
    On one of my projects it took me the same time as the coding for non-IE browsers…

    I hate that tImE-wasting-browser ;-)

  12. Thanks, I used a few of these tricks on a site i’m currently developing. Makes life a lot easier to provide ie6 support. If only I could find a way to differentiate ie8 in vista and xp, because even those have differences.

  13. Captain

    Hey, David.
    I am a reader of your blog from China.
    I just read your post which introduced about the IE condition comments today. I think it is a very useful skill and want to translate your post to Chinese in my blog(http://www.learnenjoy.cn).
    well, what do you think?
    O(∩_∩)O

  14. Chinese smilies scare me… :S

  15. Jakub

    Hmm .. I have some doubts about that. In IE6 it doesn’t work as I imagine, but in IE7 it’s pretty good .. anyway thanks

  16. Hokeypokey

    @Michael Bryan

    Guess thats why you don’t get much work then?

  17. Q_the_novice

    Useful stuff David – bookmarked!(who needs books?).

  18. Conditional comments save so much time. And takes away the need for any CSS hack. Hacks are bad!

  19. This could be achieved with php though easily enough, right?

  20. Good article Dave! I never heard about this Javascript Framework before – http://code.google.com/p/ie7-js/ (Nice link)

  21. Adel Salah

    Agree with Edd.

    Just include all of the scripts and stylesheets using php.

    PHP get_browser(null,true); function gets the browser name, so…

    $b=get_browser(null,true);
    if ($b[browser]=='IE') {
      echo 'IE ONLY' ;
    }
  22. Sam

    I choose NOT to deal with IE.
    I usually just send them to a simple web page with a continue button saying:
    “This web site will not work with IE. Use a good web browser like Firefox or Chrome.”

  23. Sam

    I choose NOT to deal with IE.
    I usually just send them to a simple web page with a continue button saying:
    “This web site will not work with IE. Use a good web browser like Firefox or Chrome.”

    • Noah

      I do the same. I don’t support IE. It’s too non-compliant for my likes and I don’t have enough development time to cater to the SINGLE browser that has issues with basic Javascript.

  24. @Sam: That’s ridiculous.

  25. François Germain

    Different usage of conditional exceptions :
    http://www.cahnory.fr/css/browser-check.html

  26. It should be mentioned, that the upcoming IE10 will *not* support conditional comments anymore:

    http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx

    (Scroll to “Removing Legacy Features”)

  27. It should be mentioned, that the upcoming IE10 will *not* support conditional comments anymore:

    http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx

    (Scroll to “Removing Legacy Features”)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!