IE 10 Specific Styles

Avatar of Chris Coyier
Chris Coyier on

Take the pain out of building site search with the Algolia hosted API. Start free now!

Conditional comments are gone in IE 10. That’s good. IE 10 is a very good browser. Feature detection is a better way to go in nearly all cases. But what if you find some styling situation where you absolutely need to target IE 10? I guess you’ll have to do this.

Rogie posted a really simple idea a while back that should still work great for this. Add the User Agent to the <html> element with a tiny bit of JavaScript:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

IE 10’s User Agent string is:

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

Which will result in:

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

And you can then style like:

html[data-useragent*='MSIE 10.0'] h1 {
  color: blue;
}
Check out this Pen!