How do I make an "else" in an IE HTML conditional?

Question

<!--[if lt IE 9]>
    This is less then IE9
ELSE
    this is all browsers: firefox, chrome, etc.
<![endif]-->

How do I do this in my HTML? I want to do an "else" ...

There is no "else": http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx — mu is too short, Jul 19 '11 at 03:50

score 118 · Accepted Answer · answered Jul 19 '11 at 03:55

118

You're not looking for an else, you're looking for <![if !IE]> <something or other> <!--[endif]> (note that this is not a comment).

<!--[if IE]>
   You're using IE!
<![endif]-->
<![if !IE]>
   You're using something else!
<![endif]>

You can find documentation on the conditional comments here.

answered Jul 19 '11 at 03:55

cwallenpoole

79,954
26
128
166

1

Can I use this to include javascript files? in other words, include a ie.js if the browser is IE, otherwise include 'all_other_browsers.js' – TIMEX Jul 19 '11 at 04:12
Yes, you can. You can place anything you want between the closing and opening tags (no nesting though...). – cwallenpoole Jul 19 '11 at 04:24
4

just note that in order to negate an ie version the condition must be in parenthesis, e.g. `<![if !(IE 7)]>` – Flak DiNenno Jul 21 '13 at 13:53
2

Unfortunately, html conditional comments are not supported in IE 10, so checking `if IE` will **not** work in IE 10... see KhanSharp's answer below for a modern solution. – Ian Campbell Aug 04 '13 at 23:36
other browsers cannot read this...so what is the necessity of <![if !IE]> – liza Oct 28 '13 at 08:47
@Liza Other browsers will ignore `<![if !IE]>` and `<![endif]>`, which means that if you want to have IE specifically *ignore* a directive you can. So, for example, this will show up in FF but not IE: `<![if !IE]>CONGRATULATIONS! Chances are you have a half-way competent team writing your browser!<![endif]>` – cwallenpoole Oct 28 '13 at 13:56
1

To do an else for higher IE version + all other browsers. You need **special syntax**: ` Here is some code for anything but IE 8 and below. `. See: http://stackoverflow.com/a/10159787/903186 – Ruut Jan 22 '15 at 10:00
1

@IanCampbell luckily IE10 does not require anything close to the level of shimming as the prior versions so this can be seen as a benefit (IE10 will run the ES5+ compatible JS) – cchamberlain Nov 03 '15 at 22:22
Thanks @cwallenpoole, its saved my time for IE8 Vs. other browser compatibility. – ArunDhwaj IIITH May 11 '16 at 14:02

score 43 · Answer 2 · answered Mar 02 '13 at 15:47

43

I use the following to load resources in IE9 or newer and all other browsers

<!--[if gte IE 9]><!-->        
    //your style or script
<!--<![endif]-->

This is hard to believe. Look the opening and closing if statement sections are inside comments (so, its not visible to other browsers) but visible to IE.

answered Mar 02 '13 at 15:47

Jhankar Mahbub

9,746
10
49
52

1

+1 Awesome, this actually works for IE 10 too! Checking `` *before* this should cover all conditions to check for when using CSS media queries. – Ian Campbell Aug 04 '13 at 23:11
Also note that *without* the `<!` immediately following the opening if statement, "-->" will appear on the page in IE 9, so you do want to include that. – Ian Campbell Aug 04 '13 at 23:30
This syntax ` – Itay Feb 02 '15 at 10:00
Too bad Babel/webpack consider this as a SyntaxError – Vadorequest Mar 31 '18 at 12:10

score 12 · Answer 3 · answered Jan 22 '15 at 10:05

12

The solution for your problem is (note the use of ):

<!--[if lt IE 9]>
  This is less then IE9
<![endif]-->
<!--[if gt IE 8]> <!-- -->
  this is all browsers: IE9 or higher, firefox, chrome, etc.
<!-- <![endif]-->

answered Jan 22 '15 at 10:05

Ruut

1,091
1
16
29

I know this isn't exactly what the OP asked for but that is exactly the solution I was looking for. Unfortunately I've to change the second to [if gt IE 7]. If only Microsoft were as persistent about Browser updates as they are about OS updates our jobs would be much easier. – Fi Horan Nov 25 '16 at 14:52

score 8 · Answer 4 · answered Jul 19 '11 at 04:09

conditional comments can be in scripts as well as in html-

/*@cc_on
@if(@_jscript_version> 5.5){
    navigator.IEmod= document.documentMode? document.documentMode:
    window.XMLHttpRequest? 7: 6;

}
@else{
    alert('your '+navigator.appName+' is older than dirt.');
}
@end
@*/

Jason Gennaro · Answer 5 · 2011-07-19T04:00:27.850

3

You do not need to do an else. ~~It is implied~~. So

// put your other stylesheets here

<!--[if lt IE 9]>
    //put your stylesheet here for less than ie9
<![endif]-->

edited Jul 19 '11 at 04:00

answered Jul 19 '11 at 03:51

Jason Gennaro

34,535
8
65
86

1

@pst. Perhaps a better use of words is needed. Presumably your IE targeted styles are being dealt with in other ways in your normal stylesheets, therefore it can work in a one or the other fashion. – Jason Gennaro Jul 19 '11 at 03:59
Since the "C" in CSS means "cascading", surely the non-IE style sheets should be *before* the IE conditional statement? Otherwise the later ones will take precedence over the previous ones and any IE specific selectors and rules they have in common. – RobG Jul 19 '11 at 04:00
IE conditionals were made so that IE can have its own instructions. All other browsers just see it as a plain HTML comment. – John Stimac Jul 19 '11 at 04:00
Noted @RobG. Thanks. Thought of that before I posted but... edited – Jason Gennaro Jul 19 '11 at 04:02
@Jason Gennaro The edit is much better (also inverting the order is important in many cases.) – Jul 20 '11 at 21:26
of course the second css will overwrite the first, if used. nice answer! – Aris Jun 27 '13 at 14:01

score 2 · Answer 6 · answered Nov 09 '16 at 17:07

The accepted answer by @cwallenpoole breaks the markup, makes HTML invalid, and breaks Visual Studio's syntax highlight.

Here's how you keep it clean:

<!--[if IE]>
    You're using IE!
<![endif]-->
<!--[if !IE]><!-->
    You're not using IE. See, even SO highlights this correctly.
<!--<![endif]-->

score 0 · Answer 7 · answered Jul 28 '17 at 21:26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
</head>
 <!--[if IE]>
<body style="margin: 38px 0 0 0;">
 <![endif]-->
 <!--[if !IE]>
<body>
 <![endif]-->

  -Content-

 </body>
</html>

This worked for me, after hours of searching. I needed the head room for a pop-up banner, that IE didn't want to animate. it was supposed to hide itself after a few seconds. Using this, I was able to just move the entire page down just enough, but only in IE, which was exactly what i needed!

Currently only for those who still use IE, I prefer FireFox or Chrome myself.

Thank you for these letters/symbols in this specific order!

This doesn't really answer the original question. While this information might be helpful to someone, it is unlikely to be found when it's associated with this question. — Guenther, Jul 28 '17 at 21:54

How do I make an "else" in an IE HTML conditional?

7 Answers7

Linked

Related