Treehouse

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!

ydkjs-3.png

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

  • iPhone-Style Passwords Using MooTools PassShark

    Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of...

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”)

  28. […] in Internet Explorer, the other browsers animate quite well. If you must support IE, adding a conditional comment with a JavaScript version would be best practice. Happy […]

  29. […] -ms-filter syntax takes precedence over the newer -ms-linear gradient syntax.  It's best to use IE conditional comments to create reliable […]

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