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

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

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

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

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

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

View more solutions

Comments

[mu is too short]

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

[Jason Gennaro]

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

[RobG]

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.

[John Stimac]

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

[Jason Gennaro]

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

[TIMEX]

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'

[cwallenpoole]

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

[Admin]

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

[Aris]

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

[Flak DiNenno]

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

[Ian Campbell]

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

[Ian Campbell]

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]

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.

[liza]

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

[cwallenpoole]

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

[Ruut]

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: stackoverflow.com/a/10159787/903186

[Itay]

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

[cchamberlain]

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

[ArunDhwaj IIITH]

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

[Fi Horan]

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.

[Guenther]

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.

[Vadorequest]

Too bad Babel/webpack consider this as a SyntaxError