CODEWITHSUNDEEP
htmlinternet-explorerbrowsercommentsconditional-statements
Trufa
Trufa

Reputation: 40747

Combine HTML conditional comments to include IE8+ and not IE

I know that for targeting IE8+ you should use:

<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->

For targeting non IE browsers you can use:

<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

You can also combine conditions like this:

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

But my problem, now that I want to target IE8+ or non IE browsers, I try to target them like this:

<!--[if (!IE)|(gte IE 8)]> -->
This should be non IE or IE8+ browsers
<!-- <![endif]-->

This seems to work for non ie browsers but add --> to IE.

I'm guessing it has something to do with the types of comments downlevel revealed, and downlevel hidden, but I'm not sure how to handle them.

Upvotes: 0

Views: 270

Answers (2)

rholmes
rholmes

Reputation: 4184

This is what works for me. I ended up having to include the non-IE-8 css twice:

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="/css/ie8.css"/>
<![endif]-->
<!--[if gte IE 9]>
  <link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<!--<![endif]-->

See:

http://msdn.microsoft.com/en-us/library/ms537512.ASPX

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Of course, this causes a performance hit, and makes the code harder to maintain. It does, however, work (at least on the browsers I've tried).

You might consider a good css library, if you can find one that meets your needs.

Upvotes: 0

Simone Pessotto
Simone Pessotto

Reputation: 1581

From: link

The next example is the opposite: "Only show this content if the browser is NOT Internet Explorer".

<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>

Conditional comments are only recognized by Internet Explorer — other browsers treat them as normal comments and ignore them. Note that in the second example above (the one that targets "other" browsers), the content is not actually inside a comment — that's why other browsers display it.

So I think that you can not combine two different types of conditional comments

Upvotes: 1

Related Questions