Detecting IE version using CSS Capability/Feature Detection

Question

IE10+ no longer supports browser detection tags to identify a browser.

For detecting IE10 I am using JavaScript and a capability-testing technique to detect certain ms prefixed styles are defined such as msTouchAction and msWrapFlow.

I want to do the same for IE11, but I am assuming that all the IE10 styles will be supported in IE11 as well. Can anyone help me identify IE11 only styles or capabilities that I could use to tell the two apart?

Extra Info

• I don't want to use User Agent type detection because it's so spotty, and can be changed, as well as I think I've read that IE11 is intentionally trying to hide the fact it's Internet Explorer.
• For an example of how the IE10 capability testing works, I used this JsFiddle (not mine) as a basis for my testing.
• Also I am expecting a lot of answers of "This is a bad idea...". One of my needs for this is that IE10 claims it supports something, but it is very badly implemented, and I want to be able to differentiate between IE10 and IE11+ so I can move on with a capability-based detection method in the future.
• This test is coupled with a Modernizr test that will simply make some functionality "fallback" to less glamorous behavior. We are not talking about critical functionality.

I am already using Modernizr, but it doesn't help here.

Butters

Why do you need to know what browser the user has? Isn't feature detection / css prefixes / css conditionals enough? – Tunisia

I forgot to mention that we have our reasons for needing to detect the browsers, that capability testing doesn't help with. Just one of our problems is that IE10 says it supports something, but doesn't do it very well. – Butters

@Tunisia - No. It's not enough unfortunately. I would like it to be, but it's not. – Butters

@Evildonald You didn't answer why you need to know -- specifically. It could well be that this is an XY problem. (ie: you're asking use to help with X - detecting IE11 - when we could answer a different question Y - how to be compatible with more browsers inclusive of IE11 for TASK Z) – Tunisia

@Tunisia - Thanks David for wanting to help with my overall problems, but I've spent over 2 weeks working out all my choices, and this is the path I've decided on. I'm trying to find a way to make it work :) – Butters

I had a .js that detects browser versions, and it said that ie11 was a firefox. what's happening, ie developers! – Traduce

This is not answer, so I am commenting here. Think about it - you have a case that you know it works in 11 but not in 10. Instead of sniffing (especially using CSS properties) for 11, sniff for 10 and break the feature detection there. You do not want to accommodate future versions that may or may not have a certain CSS property - you want to rule out a specific problematic version. Detecting a browser using CSS properties or anything other than the user agent string is feature detecting a browser instead of detecting a browser. Does that really sound to you like a logical way? – Authenticity

(Continued...) It is not different than the old if (document.all) { /* Internet Explorer code */ } else { /* Other browser code */ }. Do not depend on the existence of other features in order to find out if your feature is supported. If a certain browser and version that you can explicitly identify is misbehaving, punish it explicitly. – Authenticity

Answer 1

So I found my own solution to this problem in the end.

After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal

In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.

Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)

 /**
  Target IE 10 with JavaScript and CSS property detection.
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
 **/

 // IE 10 only CSS properties
 var ie10Styles = [
     'msTouchAction',
     'msWrapFlow',
     'msWrapMargin',
     'msWrapThrough',
     'msOverflowStyle',
     'msScrollChaining',
     'msScrollLimit',
     'msScrollLimitXMin',
     'msScrollLimitYMin',
     'msScrollLimitXMax',
     'msScrollLimitYMax',
     'msScrollRails',
     'msScrollSnapPointsX',
     'msScrollSnapPointsY',
     'msScrollSnapType',
     'msScrollSnapX',
     'msScrollSnapY',
     'msScrollTranslation',
     'msFlexbox',
     'msFlex',
     'msFlexOrder'];

 var ie11Styles = [
     'msTextCombineHorizontal'];

 /*
  * Test all IE only CSS properties
  */
 var d = document;
 var b = d.body;
 var s = b.style;
 var ieVersion = null;
 var property;

 // Test IE10 properties
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie10";
         createEl("IE10 style found: " + property);
     }
 }

 // Test IE11 properties
 for (var i = 0; i < ie11Styles.length; i++) {
     property = ie11Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie11";
         createEl("IE11 style found: " + property);
     }
 }

 if (ieVersion) {
     b.className = ieVersion;
     $('#versionId').html('Version: ' + ieVersion);
 } else {
     createEl('Not IE10 or 11.');
 }

 /*
  * Just a little helper to create a DOM element
  */
 function createEl(content) {
     el = d.createElement('div');
     el.innerHTML = content;
     b.appendChild(el);
 }

 /*
  * List of IE CSS stuff:
  * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
  */

body {
    font: 1.25em sans-serif;
}
div {
    background: red;
    color:#fff;
    padding: 1em;
}
.ie10 div {
    background: green;
    margin-bottom:.5em;
}
.ie11 div {
    background: purple;
    margin-bottom:.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>


<h2 id="versionId"></h2>

I will update the code example with more styles when I discover them.

NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.

I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.

Butters

If anyone is going to -1 this answer please at least have the decency to own up to it with a technical reason. You may disagree with it.. but it's correct and it works. – Butters

How do you know whether this code will produce correct results in IE12, IE13 and so on? – Sheridan

@EugeneXa - Thanks for raising that point Eugene. You are correct. I had assumed that, but it's a good idea to make that a known issue with this "solution" – Butters

Why are you using this method instead of if (document.documentMode === 11) { ... }? Unless, of course, you want to use the CSS property in a @supports at-rule (which is not yet supported in IE, by the way). – Minster

@RobW document.documentMode was removed from IE11. They now have a new "edge" mode - msdn.microsoft.com/en-us/library/ie/… – Correa

You might want to include a simple example in the answer (not linked to jsfiddle), in case jsfiddle gets invaded by aliens or something. – Wassyngton

If you have existing classes in your body tag, this will overwrite them. Here's the very minor fix: jsfiddle.net/jmjpro/njvr1jq2/1. – Phonetic

Also, you're going to want to hide the ieVersion element with css: #ieVersion { display: none } – Phonetic

Answer 2

In the light of the evolving thread, I have updated the below:

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}
}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {
    .ie8 {property:value;}
}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 and 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

The use of -ms-high-contrast means that MS Edge will not be targeted, as Edge does not support -ms-high-contrast.

IE 11

_:-ms-fullscreen, :root .ie11up { property:value; }

---

Javascript alternatives

Modernizr

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element

User agent selection

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Adds (e.g) the below to html element:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

---

Footnote

If possible, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.

---

Attribution / Essential Reading

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• The Spanner

Isoprene

The IE10 only does not work for me. The backslash-9 does not remove IE11. I am trying to show a div for IE 10 but not for IE11... It still shows up on IE 11... – Whirly

Ah weird. It works on most of the properties but clip: auto\9; is still interpreted as clip: auto; in IE 11. Somehow this is not ignored... – Whirly

For me, the second IE10 option worked for IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} } I found it in mediacurrent.com/blog/… – Rubi

After reading all of this I think -ms-high-contrast: active might be something to avoid because according to MS specifications you will actually target high-contrast theme users in Edge with your IE 10/11 rules. In the page this answer links to regarding -ms-high-contrast it actually says that just the -ms-high-contrast: none value is no longer supported. I think no one mentions this because most people do not have high contrast mode enabled and most people do not use Edge. But still, there's someone out there who has that configuration and this probably isn't cool for them. – Pagoda

This answer needs to be updated to say which of those rules also affect Edge 12 to Edge 18. And care needs to be taken to avoid rules that will be screwed on some configurations e.g. high-contrast mode allows values black-on-white or white-on-black according to msdn, yet the CSS selector here will fail for users with that configuration - perhaps can use (-ms-high-contrast: none) or not (-ms-high-contrast: none)? – Haletta

Great answer! You could make it a bit more clear that the .ie11up is whatever selector you need though to actually target an element. Also to answer a question above: the IE11 solution only affects IE11 and not for example Edge >=15 - have not checked if it affects lower versions like IE10 but I think not. – Almswoman

Answer 3

To target IE10 and IE11 only (and not Edge):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* add your IE10-IE11 css here */   
}

Diluvial

Something like that could be a sass mixin too! – Butters

Does that target IE11 only or Edge too? – Navarrete

Targets IE10 and IE11 but not edge. – Stoicism

This comment saved my a*s. I wanted to change css for specific width on IE only and not other browsers. This is what worked for me: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 960px;) { /* add your IE10-IE11 css here */ } This does not affect edge, exactly what I wanted. – Unitive

Answer 4

This seems to work:

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

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

Adulterant

This one not differentiate between ie10 and ie11 but if you don't mind also detecting ie10 then you are good with this one. – Stoicism

Answer 5

Here's an answer for 2017 on, where you probably only care about distinguishing <=IE11 from >IE11 ("Edge"):

@supports not (old: ie) { /* code for not old IE here */ }

More demonstrative example:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

This works because IE11 doesn't actually even support @supports, and all other relevant browser/version combinations do.

Vex

I understand this approach, but have never seen the "(old: ie)" property and value used before. Is there a reference for this? – Bagel

@GrowthMindset There is no such property or value. Because of the nature of the 'supports' at-rule, it fairly uniquely must accept CSS that the browser may consider nonsense. You can't have a rule facilitating testing support or not for a thing without the possibility that support will not be available. Knowing this, I have found it simpler to use 'old: ie' than remembering some actual property, particularly as it is the support of the 'supports' at-rule being used here, and not the actual argument given to the rule. It makes it easy to read and grok. Essentially: "supports not old ie {" – Vex

Answer 6

You can write your IE11 code as normal and then use @supports and check for a property that isn't supported in IE11, for example grid-area: auto.

You can then write your modern browser styles within this. IE doesn't support the @supports rule and will use the original styles, whereas these will be overridden in modern browsers that support @supports.

.my-class {
// IE the background will be red
background: red;

   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}

Jer

This works and is a good solution, but the reasoning given isn't correct. IE11 doesn't support @supports at all, so it ignores anything in the @supports block. So you can put anything in the @supports conditional (eg @supports (display: block)) and IE11 will still skip over it. – Pam

This is what I meant by "IE 11 will ignore" but you're right, that is not entirely clear. I've updated the answer to be more clear that IE doesn't support @supports. – Jer

Answer 7

This worked for me

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

And then in the css file things prefixed with

body.ie11 #some-other-div

When is this browser ready to die?

Mauromaurois

Answer 8

Try this:

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 .legend 
{ 
  line-height: 1.5em;
  position: relative;
  top: -1.1em;   
}

Chinkiang

Answer 9

Take a look at this article: CSS: User Agent Selectors

Basically, when you use this script:

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

You can now use CSS to target any browser / version.

So for IE11 we could do this:

FIDDLE

html[data-useragent*='rv:11.0']
{
    color: green;
}

Cyanogen

That would break in Firefox 11 (even though it is unsupported now, it matters). It also has rv:11.0 in its user agent string. – Authenticity

Answer 10

Use the following properties:

• !!window.MSInputMethodContext
• !!document.msFullscreenEnabled

Autogenous

Answer 11

You should use Modernizr, it will add a class to the body tag.

also:

function getIeVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

Note that IE11 is still is in preview, and the user agent may change before release.

The User-agent string for IE 11 is currently this one :

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

Which means your can simply test, for versions 11.xx,

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

Pilfer

Thanks Neo, but I'm already adding a class to my body tag AND using Modernizr. I'm after a way to differential IE10 from IE11 without using User Agent which isn't trustworthy. – Butters

Missing the colon in rv 11. var isIE11 = !!navigator.userAgent.match(/Trident.*rv:11\./) – Phytopathology

Answer 12

Perhaps Layout Engine v0.7.0 is a good solution for your situation. It uses browser feature detection and can detect not only IE11 and IE10, but also IE9, IE8, and IE7. It also detects other popular browsers, including some mobile browsers. It adds a class to the html tag, is easy to use, and it's performed well under some fairly deep testing.

http://mattstow.com/layout-engine.html

Teratism

Answer 13

If you're using Modernizr - then you can easily differntiate between IE10 and IE11.

IE10 doesn't support the pointer-events property. IE11 does. (caniuse)

Now, based on the class which Modernizr inserts you could have the following CSS:

.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}

Cyanogen

Answer 14

You can use js and add a class in html to maintain the standard of conditional comments:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

Or use a lib like bowser:

https://github.com/ded/bowser

Or modernizr for feature detection:

http://modernizr.com/

Holmquist

Answer 15

Detecting IE and its versions actually is extremely easy, at least extremely intuitive:

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // as of IE8
    browser = 'IE';
    ieVersion = document.documentMode;
}

.

This way, ou're also catching high IE versions in Compatibility Mode/View. Next, its a matter of assigning conditional classes:

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';

Extrados

Answer 16

You can try this:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}

Drawers

Answer 17

I ran into the same problem with a Gravity Form (WordPress) in IE11. The form's column style "display: inline-grid" broke the layout; applying the answers above resolved the discrepancy!

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}

Misanthropy

Answer 18

Step back: why are you even trying to detect "internet explorer" rather than "my website needs to do X, does this browser support that feature? If so, good browser. If not, then I should warn the user".

You should hit up http://modernizr.com/ instead of continuing what you're doing.

Rentier

Thanks for an alternate solution, but I am already using Modernizr, and IE10 mis-represents its capabilities to it. – Butters

I assume you know which ones, and have filed an issue with Modernizr so that they can add more Modernizrs checks for that particular browser? (If not, you should. If you find something that impacts hundreds of thousands of devs, filing that with the people responsible for the shim is the only right thing to do) – Cacomistle

For those of us writing user-facing code, you often need an answer now, not a bug filed in a third party library and a patch there. Which is to say, it's nice that you want them to improve Modernizr, but it's not a fit here. – Deathly

I think detecting the real browser is a reasonable goal per se. – Misfile

@DeanJ sure, and for those questions someone else will provide an answer, too. That doesn't make it any less important to get responses like these that tell you to think about what you're doing. Besides, at the time of repy there were no edits to the post, and there was no mention of "I need it to work right now", so I had no reason to assume they didn't want a reality check. – Cacomistle