Targeting IE10 & IE11 Browsers with CSS

Conditional comments have long been the go-to method to fix bugs that show up in everyone’s favourite browser: Internet Explorer. You’re more than likely familiar with them.

However, I recently came across an issue with browser testing in IE 11. The weird thing was that the site I was working on actually was working the way it was supposed to in IE 8/9 – that doesn’t happen too often. So, I practiced a bit of Google-Fu and, to my surprise, it seems as though Microsoft have dropped the conditional comment system for IE 10 and above.

That meant I was in quite a pickle: how could I target IE 10/11 with specific CSS, if Microsoft dropped support for the way every developer ever has done it?

The Solution

Thankfully, after a bit more research, I stumbled across this gem:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

This little bit of code does exactly what the (now non-supported) old conditional commenting system does for older IE verrsions – except this works for IE10 and up. Nice! It seems as though IE 10 & 11 are the only browsers to support the -ms-high-contrast media query, which makes sense if you think about it. Anyway, just pop this bad boy in your SCSS/LESS/CSS file, and hit the road running.