O'Reilly

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • CSS Background Animations

    Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

  • MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

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!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...