3

The following code defines if the browser isn't IE execute:

<!--[if !IE]> -->
...
<!-- <![endif]-->

What if I want to edit the above to have...

IF IE but IE version is less than 9 .. SHOW THIS
ELSE IF IE version is greater than or equal to 9 OR Other Browser .. SHOW THIS

How can I achieve it? When searching all I found are how to decide if it's IE versions or not IE at all.

Jeremy Cook
  • 20,840
  • 9
  • 71
  • 77
SearchForKnowledge
  • 3,663
  • 9
  • 49
  • 122

3 Answers3

4

You can use something like this:

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

And then target your selectors by:

 .ie8 .your-selector

As described here.

If you want to have a switch you can also at a class to the html-tag, e.g.

<!--[if gt IE 8]><!--> <html class ="i-am-so-happy-it-is-no-ancient-ie"><!--<![endif]-->

and use it like this:

.i-am-so-happy-it-is-no-ancient-ie .your-selector{...}
.ie6 .your-selector {...}

Edit I forgot IE 9.. Acutally Paul Irish suggests to use this form (slightly adjusted by me to make a non ie-switch possible using a single .ie .class - although you have to be aware that ie 6 doesn't support multiple classes, but you get the idea): 

<!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-ie"> <!--<![endif]-->

For an explanation why, see the link above.

hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84
  • Interesting, but it makes me quesy – Jeremy Cook Mar 25 '14 at 21:14
  • I saw a lot of websites which uses this method. Just add the regular conditioning statement as is for other browsers. Correct? – SearchForKnowledge Mar 25 '14 at 21:16
  • @SearchForKnowledge Unfortunately I don't remember the explanation why this is the case (it is kind of complicated and there is a thread somewhere on the github-repo of html5-boilerplate), but the last element is being rendered for normal browsers as well. – hugo der hungrige Mar 25 '14 at 21:18
  • Having thought about it a little more, I actually like, sort of. What makes me queasy is that it affects the `html` element. I would probably have it change a div element that wraps everything. – Jeremy Cook Mar 25 '14 at 21:21
  • @JeremyCook this or the body should work as well, if I'm not mistaken. – hugo der hungrige Mar 25 '14 at 21:22
  • Oh I'm sure it works. Modifying `html` like that, for whatever reason makes me uncomfortable. It makes the compiler in my brain flip out I guess. – Jeremy Cook Mar 25 '14 at 21:25
  • This SO post is about comments before the doc type, but doing this with the opening html tag makes me nervous for similiar fears of quirky side-effects http://stackoverflow.com/questions/941100/can-comments-appear-before-the-doctype-declaration – Jeremy Cook Mar 25 '14 at 21:30
  • 1
    @JeremyCook well you should not put before the doctype. There is one issue with IE6 described in the article, which shouldn't occur if you use the form of the last example. – hugo der hungrige Mar 26 '14 at 20:15
2

you can add the CSS conditional statement for IE browser in HTML page only not in the CSS file..

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
Kheema Pandey
  • 9,977
  • 4
  • 25
  • 26
2

To target not IE with conditional comments.

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

And you can do even more advanced stuff: http://www.impressivewebs.com/conditional-comments/

JohanVdR
  • 2,880
  • 1
  • 15
  • 16