Problem
How can I make particular conditions, such as Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code, only work in Internet Explorer 10?
This is what I tried, but it didn’t work:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Instead of html class=”no-js ie10″ lang=”en”>, Internet Explorer 10 skips the conditional comments and uses html lang=”en” class=”no-js”>.
Asked by trusktr
Solution #1
JavaScript navigation isn’t something I’d use. Because it can be fooled, use userAgent or $.browser (which uses navigator.userAgent).
To target Internet Explorer 9, 10, and 11 (as well as the most recent Chrome), follow these steps:
@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 use the Edge Browser as a target:
@supports (-ms-accelerator:true) {
.selector { property:value; }
}
Sources:
Answered by Roni
Solution #2
On this site, I discovered a solution thanks to a kind comment:
The solution is:
if (Function('/*@cc_on return document.documentMode===10@*/')()){
document.documentElement.className+=' ie10';
}
It
Answered by Willem de Wit
Solution #3
You could attempt something like this with jQuery:
if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}
Because this function was removed from the main jQuery library, you’ll need to include the jQuery Migrate library to use it.
It worked out perfectly for me. But there’s no substitute for conditional comments!
Answered by Max Sohrt
Solution #4
Conditional comments are no longer read by Internet Explorer 10. This means that it will treat conditional comments in the same way that any other browser would: as standard HTML comments that should be ignored completely. Using the markup provided in the question as an example, all browsers, including IE10, will completely ignore the highlighted gray comment areas. Conditional comment syntax is not mentioned in the HTML5 standard, which is why IE10 has chosen to cease supporting it.
However, as evidenced by the comments and more recent answers, conditional compilation in JScript is still possible. Unlike jQuery.browser, it’s not going away in the final release. Of course, user-agent sniffing is still as vulnerable as ever and should never be used under any circumstances.
If you absolutely must target Internet Explorer 10, either employ conditional compilation, which may yet get support in the near future, or — if you can avoid it — use a feature detection library like Modernizr instead of (or in addition to) browser detection. User-agent sniffing is more of a pain than a realistic alternative unless your use case necessitates noscript or server-side support for IE10.
It may seem inconvenient, but keep in mind that as a modern browser that adheres to today’s Web standards1, you shouldn’t have to write extra code for IE10 unless absolutely essential, as it’s expected to behave and render similarly to other browsers. 2 And, given IE’s past, that may seem unlikely, but how many times have you anticipated Firefox or Chrome to act in the same way only to be disappointed?
If you have a good purpose to target specific browsers, by all means use the other tools available to you to find them. I’m just suggesting that you’ll have a much harder time finding such a reason today than you did in the past, and it’s not something you can count on.
1 Not only IE10, but also IE9 and even IE8 handle most of the mature CSS2.1 standard far better than Chrome, simply because IE8 was so focused on standards compliance (at the time, CSS2.1 was already fairly stable with only minor differences from today’s recommendation), whereas Chrome appears to be little more than a half-polished tech demo of cutting-edge pseudo-standards.
2 And, while I may be biased, I can assure you that it does. If your code works in other browsers but not in Internet Explorer, the chances that it’s a problem with your own code rather than IE10 are far higher than they were, say, three years ago, with previous versions of Internet Explorer. Again, I may be biased, but don’t you think you are as well? Take a look at your feedback.
Answered by BoltClock
Solution #5
The IE Standards Support Documentation is a nice place to start.
Here’s how to use JavaScript to target Internet Explorer 10:
if ("onpropertychange" in document && !!window.matchMedia) {
...
}
Here’s how to use CSS to target Internet Explorer 10:
@media all and (-ms-high-contrast: none) {
...
}
See another question: How to develop a CSS hack for IE 11 if IE11 has to be filtered or reset via CSS.
Answered by Paul Sweatte
Post is based on https://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e