treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Conditional comments

  • Given how many bugs, errors, and omissions there are in Internet Explorer's support for CSS, it's a good idea to have a separate stylesheet just for IE6/7 that you load only if the user is using one of those browsers. For example, you could put this in the head of your document:

    <!--[if IE 6]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"ie6.css\" />
    <[endif]-->


    This is called a conditional comment. Since the syntax is that of a regular HTML comment, the code inside will be ignored by every browser except IE6, which will recognize the special [if IE 6] statement and parse the code.

    But there's an even simpler way to do this. Instead of using the [if IE 6] piece to load another stylesheet, use it to create a special wrapper <div> that will only appear if the browser is IE6. For example:

    <body>
    <!--[if IE 6]>
    <div id=\"ie6\">
    <![endif]-->

    <div class=\"box\">Test!</div>
    (more code, etc.)

    <!--[if IE 6]>
    </div>
    <![endif]-->
    </body>


    Now, any time you need to change the styles for an element but only in IE6, just prefix the selector with "#ie6":

    .box {width: 100px;}
    #ie6 .box {width: 200px;}


    Credit for this trick goes to Position is Everything :-)
  • Hi DaGuy,
    Good article, if I may call it that way. A few weeks ago I came by this site http://www.savethedevelopers.org/. They have made just something like you said. Load it with IE6 or click on 'show me how it works'. I think it's a good idea indeed to tell people that it's time to upgrade. 8-)

    In my own site I use this code to show a small badge of firefox when people visit the site with IE:

    <!--[if IE]>
    <a href=\"http://www.mozilla-europe.org/nl/products/firefox/\">
    <img src=\"design/icons/buttons/firefox.png\" alt=\"Firefox\" />
    </a>
    <![endif]-->

    http://www.zwahlendesign.ch/images/badges2/get_firefox_80x15_3.png