targeting IE and !IE

Question

i know there are 1'000 questions about this but i just can't make this to work. i simply want to target ALL versions of IE (IE11 included) and give the html a certain class, and for all the other browsers (firefox, opera, chrome) i want the html to have another class or even no class at all. here's my non-working code:

<!-- [if IE] --> <html lang="en" class="legacy"><!-- [endif] -->
<!-- [if !IE] --> <html lang="en" class="modern"><!-- [endif] -->

what's wrong with this? i'm getting class="legacy" everywhere :\

a generic javascript solution to target any IE browser will do just fine too!

this is the use case:

i'm using skrollr jquery plugin, and i'm destroying it with enquire.js for mobile and as it's not working working on explorer (and partially not working in IE11 too.. yeah.. IE just won't get it right in ANY case) i have a function that looks like this:

var $html = $("html");

function enableSkrollr() {

    var s = skrollr.init({
        forceHeight : false
    });
}//enable

function disableSkrollr() {

    var s = skrollr.init();
    s.destroy();

}//disable

if ($html.hasClass("modern")) {
    enquire.register("screen and (min-width: 1140px)", {
        match : function() {
            enableSkrollr();
        },
        unmatch : function() {
            disableSkrollr();
        }
    });
};

so i'm relying on that modern class in the html tag

"legacy" is a very nice way of saying "sh*tty". Good synonym. — Chris Baker, Aug 26 '14 at 20:32
Conditional comments were removed in IE10. This will only work for IE9 and below. — , Aug 26 '14 at 20:33
Not possible. Conditional comments are no longer supported as of IE 10. You can target all IE's up to 9 and then target IE 10 and IE 11 with Chrome, Firefox, Safari and Opera. Only way to target IE 10 and IE 11 is through JavaScript using the user agent string. — War10ck, Aug 26 '14 at 20:33
@SoufianeHassou That's because his/her conditional comment is written incorrectly. Should be `` OP is closing the conditional comment too early. It has to be a continuous HTML comment for the other browsers to ignore it.. — War10ck, Aug 26 '14 at 20:36
Could you tell us the use case by any chance? `useragent` sniffing as the JavaScript method is referred to is discouraged. It is a better idea to use feature detection such as that found in [modernizr.js](http://modernizr.com/). — War10ck, Aug 26 '14 at 20:42

quw · Answer 1 · 2014-08-26T21:49:12.957

To target IE10+ with CSS, use a media query with a rule that only IE supports.

Example, where .class is the class for the  html tag:

.class {
    background-color: red;
    width: 150px;
    height: 150px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10+ styles go here */
    .class {
        background-color: gray;
    }
}

JSFiddle

Continue to use the conditional comments to target older versions of IE.

Edit: Instead of having your javascript just detect the class, also you could have it check if the media query matches as well:

if (document.getElementsByTagName('html')[0].className === 'modern') {
    var mql = window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)");
    mql.addListener(handleMediaQuery);
    handleMediaQuery(mql);

    function handleMediaQuery(mql) {
        if (mql.matches) {
            console.log('ie')
        }
    }
}

You may want to do this with jQuery and enquire.js instead of pure javascript.

Demo Fiddle

@vlrprbttst My answer previously contained duplicate css. You only need to put the overridden styles in the media query. — quw, Aug 26 '14 at 20:55
because i have a javascript relying on the html class, and i don't want to partially relying to it and on the other part on a media query — valerio0999, Aug 26 '14 at 20:57
@vlrprbttst Please see my edit for a way to detect the media query changes in JS. — quw, Aug 26 '14 at 21:13

score 0 · Accepted Answer · edited May 23 '17 at 11:57

This answer only attempts to explain the what's wrong with this? part of the question...

Here are the lines you showed:

<!-- [if IE] --> <html lang="en" class="legacy"><!-- [endif] -->
<!-- [if !IE] --> <html lang="en" class="modern"><!-- [endif] -->

In the first line, the first part  is a comment, it is not a conditional comment because you close it normally with -->

The second part <html lang="en" class="legacy"> is a normal html tag that all browsers see, again, because you closed the first comment.

The Third part  is also a normal html comment with standard open and close comment character sequences.

If you want only IE to see that line you need to use IE conditional comment sequences

<!--[if IE]><html lang="en" class="legacy"><![endif]-->

However, this works only in IE 9 and below — as of IE 10 support for conditional comments was dropped. That could be OK because IE 10 and IE 11 could be considered class="modern" and you could use feature detection to add a shim if necessary.

Your second line, beginning with  is also a normal comment, so all browsers will also see this <html> tag.

Getting the syntax right won't help you here, though, since only IE will process the conditional comment and decide to ignore the content because IE is not !IE

The link that @sbeliv01 posted to stackoverflow.com/a/14555015/634752 explains how to do this, using the conditional comment to close the comment(!)

targeting IE and !IE

2 Answers2