CODEWITHSUNDEEP
htmlcssinternet-explorerif-statementinternet-explorer-11
valerio0999
valerio0999

Reputation: 12138

targeting IE and !IE

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

Upvotes: 2

Views: 282

Answers (2)

Stephen P
Stephen P

Reputation: 14800

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 <!-- [if IE] --> 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 <!-- [endif] --> 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 <!-- [if !IE] --> 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(!)

Upvotes: 0

quw
quw

Reputation: 2854

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

Example, where .class is the class for the <!-- [if !IE] --> 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

Upvotes: 1

Related Questions