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

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:

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';
}

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!

Related