Starting a digital project? Get our free guide to digital project discovery

780-633-0415
INFO@PAPER-LEAF.COM

about a 1 minute read

Targeting IE10 & IE11 Browsers with CSS

Targeting IE10 & IE11 browsers with CSS is actually possible, but not the way we're used to doing it. Why? Because Microsoft deprecated the traditional conditional commenting method we used in older versions of IE. Sweet. Here's the solution for IE10+!

^

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.

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of subscribers and receive in-depth design articles, exclusive content & other digital product-related goodies delivered via our weekly newsletter. Why wait? Join now and don’t miss a beat!