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" ...

Milligan

There is no "else": msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx – Homothermal

Answer 1

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.

Myron

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' – Milligan

Yes, you can. You can place anything you want between the closing and opening tags (no nesting though...). – Myron

just note that in order to negate an ie version the condition must be in parenthesis, e.g. <![if !(IE 7)]> – Intravasation

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. – Charlatanism

other browsers cannot read this...so what is the necessity of <![if !IE]> – Browning

@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]> – Myron

To do an else for higher IE version + all other browsers. You need special syntax: <!--[if gt IE 8]> <!-- --> Here is some code for anything but IE 8 and below. <!-- <![endif]-->. See: https://mcmap.net/q/282055/-ie-conditional-comments-and-chrome-firefox – Forewoman

@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) – Hickson

Thanks @cwallenpoole, its saved my time for IE8 Vs. other browser compatibility. – Rebuttal

Answer 2

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.

Songer

+1 Awesome, this actually works for IE 10 too! Checking <!--[if lte IE 8]> ... ... <![endif]--> before this should cover all conditions to check for when using CSS media queries. – Charlatanism

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. – Charlatanism

This syntax <!--[if IE]> is not working in IE7 compatibility mode. Use the syntax in this answer to make it work if you are unlucky enough to support IE6 :-| – Contractive

Too bad Babel/webpack consider this as a SyntaxError – Peyter

Answer 3

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]-->

Forewoman

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. – Gouge

Answer 4

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
@*/

Staffman

Answer 5

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]-->

Levant

@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. – Levant

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. – Harmon

IE conditionals were made so that IE can have its own instructions. All other browsers just see it as a plain HTML comment. – Zachariah

Noted @RobG. Thanks. Thought of that before I posted but... edited – Levant

@Jason Gennaro The edit is much better (also inverting the order is important in many cases.) – Bricebriceno

of course the second css will overwrite the first, if used. nice answer! – Polysynthetic

Answer 6

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]-->

Instate

Answer 7

<!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!

Dr

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. – Hullo