Nested conditional comments

Posted in Front-end code.

It looks like the issue below was actually down to caching – Doh! The and/or operators work fine in IE 5.5 through 8, and will be what we are using. I’ll leave this post here to point out that they are quite useful, especially if you are leaving IE<6 with basic styles.

In a recent test with Internet Explorer’s conditional comments, some of the more complex operators didn’t seem to work. For example, trying to target IE 6 and 7 defensively, this ‘and’ operator should work:

<!--[if (gte IE 6)&(lt IE 8)]>
    [import this style sheet]
<![endif]––>

However, that didn’t seem to work when testing in virtual machines, only the first part did. It was the same for the ‘or’ version as well, it just counted as greater than or equal to Internet Explorer 6.

Since we can’t move CSS based conditional comments into the CSS, what did work in our testing was this slightly inelegant nested version:

<!--[if lt IE 8]>
    <![if gte IE 6]>
        [import this stylesheet.]
    <![endif]>
<![endif]––>

Can anyone else replicate this? I’ve a quick test page to see if you can point a 5.5 / 6 / 7 / 8 IE browser at it.

3 contributions to “Nested conditional comments”

  1. Using IE6 on XP (SP2): I get
    ———–
    [if (gte IE 6)&(lte IE 7)]

    [if (IE 6)|(IE 7)]

    [if gte IE 6] nested within [if lt IE 8]
    ———–
    Followed by:
    ———–
    ———–
    The following script will show the rendering version Internet Explorer thinks it is:

    So:
    * All the IE6 tests work correctly, displaying the text
    * All the IE5 tests work correcly, displaying nothing
    * The ‘compatibility mode’ Javascript isn’t displayed, because document.mode is IE8 only. document.compatMode should work in IE6 + 7.

    There’s an interesting MSDN article which talks about setting HTTP Headers which can control IE’s behaviour: setting ‘X-UA-Compatible’ to ‘IE=7’ should make IE8 render as IE7. I’d love to know if that were reliable!
    source: http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

  2. Hi Marcus,

    It seems it was down to caching – I’ve updated the post.

    I’m sure that the HTTP header thing will be reliable (in IE8), there was such a big fuss about it.

    However, check that page just before/after IE8 goes mainstream, as if Joel Spolsky is right, they will have reversed the default (so that IE8 renders as IE7 by default).

Comments are closed.