How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

Question

I wouldn't use JavaScript navigator.userAgent or $.browser (which uses navigator.userAgent) since it can be spoofed.

To target Internet Explorer 9, 10 and 11 (Note: also the latest Chrome):

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

To target Internet Explorer 10:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

To target Edge Browser:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Sources:

• Moving Internet Explorer specific CSS into @media blocks
• How to Target Internet Explorer 10 and 11 in CSS
• CSS Hacks for Windows 10 and Microsoft’s Edge Web Browser

I found a solution on this site where someone had a valuable comment:

The solution is:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

It

• doesn’t need conditional comments;
• works even if comment stripping compression/processing;
• no ie10 class added in Internet Explorer 11;
• more likely to work as intended with Internet Explorer 11 running in Internet Explorer 10 compatibility mode;
• doesn’t need standalone script tag (can just be added to other JavaScript code in the head).
• doesn't need jQuery to test

Perhaps you can try some jQuery like this:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

To use this method you must include the jQuery Migrate library because this function was removed from the main jQuery library.

Worked out quite fine for me. But surely no replacement for conditional comments!

Internet Explorer 10 does not attempt to read conditional comments anymore. This means it will treat conditional comments just like any other browser would: as regular HTML comments, meant to be ignored entirely. Looking at the markup given in the question as an example, all browsers including IE10 will ignore the comment portions, highlighted gray, entirely. The HTML5 standard makes no mention of conditional comment syntax, and this is exactly why they have chosen to stop supporting it in IE10.

Note, however, that conditional compilation in JScript is still supported, as shown in the comments as well as the more recent answers. It's not going away in the final release either, unlike jQuery.browser. And of course, it goes without saying that user-agent sniffing remains as fragile as ever and should never be used under any circumstances.

If you really must target IE10, either use conditional compilation which may still see support in the near future, or — if you can help it — use a feature detection library such as Modernizr instead of (or in conjunction with) browser detection. Unless your use case requires noscript or accommodating IE10 on the server side, user-agent sniffing is going to be more of a headache than a viable option.

Sounds pretty cumbersome, but remember that as a modern browser that's highly conformant to today's Web standards¹, assuming you've written interoperable code that is highly standards-compliant, you shouldn't have to set aside special code for IE10 unless absolutely necessary, i.e. it's supposed to resemble other browsers in terms of behavior and rendering.² And it sounds far-fetched, given IE's history, but how many times have you expected Firefox or Chrome to behave the same way only to be met with dismay?

• Firefox did not support box-sizing unprefixed for years
• Firefox has historically had weird outline behavior, and this was also the case for years
• Firefox refuses to behave reasonably when it comes to positioned table-cells, citing undefined behavior as an excuse, while other browsers appear to cope just fine
• Safari and Chrome have lots of trouble with certain CSS selectors, sometimes with fixes that really take you back to the good ol' days of IE5, IE6 and IE7
• Chrome seems to have lots of trouble in the repainting department in general, for example not reflowing layouts correctly when media styles are updated; it seems that half of Chrome's bugs can be worked around simply and only by forcing a repaint, again IE5/6/7-level stuff
• A few strains of WebKit have been known to outright lie about support for certain features, meaning they actually defeat feature detection mechanisms, of all things

If you do have a legitimate reason to be targeting certain browsers, by all means sniff them out with the other tools given to you. I'm just saying that you're going to be much more hard-pressed to find such a reason today than what it used to be, and it's really just not something you can rely on.

---

¹_{Not only IE10, but IE9, and even IE8 which handles most of the mature CSS2.1 standard far better than Chrome, simply because IE8 was so focused on standards compliance (at which time CSS2.1 was already pretty stable with only minor differences from today's recommendation) while Chrome seems to be little more than a half-polished tech demo of cutting-edge pseudo-standards.}

²_{And I may be biased when I say this, but it sure as hell does. If your code works in other browsers but not IE, the odds that it's an issue with your own code rather than IE10 are far better compared to, say, 3 years ago, with previous versions of IE. Again, I may be biased, but let's be honest: aren't you too? Just look at your comments.}

A good place to start is the IE Standards Support Documentation.

Here is how to target IE10 in JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

Here is how to target IE10 in CSS:

@media all and (-ms-high-contrast: none) {
...
}

In case IE11 needs to be filtered or reset via CSS, see another question: How to write a CSS hack for IE 11?

Both solutions posted here (with slight modifications) work:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

or

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

You include either of the above lines inside of head tag of your html page before your css link. And then in css file you specify your styles having "ie10" class as a parent:

.ie10 .myclass1 { }

And voilà! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.