Search code examples
internet-explorerinlineconditional-comments

Do IE Conditional Comments work inline?


Should this work?

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/minify/css?f=ie8.css<!--[if lte IE 7]>,ie7.css<![endif]--><!--[if lte IE 6]>,ie6.css<![endif]-->" />
<![endif]-->

Apparently nested comments don't work, so what about this?

<link rel="stylesheet" type="text/css" href="/minify/css?f=someotherfile.css<!--[if IE]>,ie8.css<![endif]--><!--[if lte IE 7]>,ie7.css<![endif]--><!--[if lte IE 6]>,ie6.css<![endif]-->" />

Solution

  • No, conditional comments are not macro-style processing above HTML; they can only go where normal HTML comments can. Comments can't go inside tags.

    Therefore:

    <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="/minify/css?f=ie8.css,ie7.css,ie6.css"><![endif]-->
    <!--[if (gte IE 7)&(lt IE 8)]><link rel="stylesheet" type="text/css" href="/minify/css?f=ie8.css,ie7.css"><![endif]-->
    <!--[if (gte IE 8)&(lt IE 9)]><link rel="stylesheet" type="text/css" href="/minify/css?f=ie8.css"><![endif]-->
    

    (Do you have enough IE-hack rules that a separate stylesheet is warranted, even for IE8? That browser is generally pretty well behaved, as long as it's not in a compatibility mode. If you only have a few rules, this tip might be of use.)