How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
I tried this, but it doesn't work:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10 ignores the conditional comments and uses the <html lang="en" class="no-js"> instead of <html class="no-js ie10" lang="en">.
Answer
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: