about a 1 minute read

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), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  

See the Pen by Keyfer Mathewson (@keyfermath) on CodePen.

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.

one of us one of us

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of other designers getting wallpapers, in-depth design articles, free fonts & other design goodies delivered via our weekly design newsletter. Why wait? Join now and don’t miss a beat!