Detecting IE11 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    ALSO I am already using Modernizr  but it doesn t help here   I need help for a solution to my clearly asked question please

User · Answer

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

User · Answer

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    x000D   x000D       x000D    Target IE 10 with JavaScript and CSS property detection  x000D     x000D      2013 by Tim Pietrusky x000D      timpietrusky com x000D       x000D   x000D      IE 10 only CSS properties x000D   var ie10Styles     x000D        msTouchAction   x000D        msWrapFlow   x000D        msWrapMargin   x000D        msWrapThrough   x000D        msOverflowStyle   x000D        msScrollChaining   x000D        msScrollLimit   x000D        msScrollLimitXMin   x000D        msScrollLimitYMin   x000D        msScrollLimitXMax   x000D        msScrollLimitYMax   x000D        msScrollRails   x000D        msScrollSnapPointsX   x000D        msScrollSnapPointsY   x000D        msScrollSnapType   x000D        msScrollSnapX   x000D        msScrollSnapY   x000D        msScrollTranslation   x000D        msFlexbox   x000D        msFlex   x000D        msFlexOrder    x000D   x000D   var ie11Styles     x000D        msTextCombineHorizontal    x000D   x000D      x000D      Test all IE only CSS properties x000D       x000D   var d   document  x000D   var b   d body  x000D   var s   b style  x000D   var ieVersion   null  x000D   var property  x000D   x000D      Test IE10 properties x000D   for  var i   0  i  lt  ie10Styles length  i      x000D       property   ie10Styles i   x000D   x000D       if  s property     undefined    x000D           ieVersion    ie10   x000D           createEl  IE10 style found      property   x000D         x000D     x000D   x000D      Test IE11 properties x000D   for  var i   0  i  lt  ie11Styles length  i      x000D       property   ie11Styles i   x000D   x000D       if  s property     undefined    x000D           ieVersion    ie11   x000D           createEl  IE11 style found      property   x000D         x000D     x000D   x000D   if  ieVersion    x000D       b className   ieVersion  x000D           versionId   html  Version      ieVersion   x000D     else   x000D       createEl  Not IE10 or 11     x000D     x000D   x000D      x000D      Just a little helper to create a DOM element x000D       x000D   function createEl content    x000D       el   d createElement  div    x000D       el innerHTML   content  x000D       b appendChild el   x000D     x000D   x000D      x000D      List of IE CSS stuff  x000D      http   msdn microsoft com en-us library ie hh869403 v vs 85  aspx x000D       x000D  body   x000D      font  1 25em sans-serif  x000D    x000D  div   x000D      background  red  x000D      color  fff  x000D      padding  1em  x000D    x000D   ie10 div   x000D      background  green  x000D      margin-bottom  5em  x000D    x000D   ie11 div   x000D      background  purple  x000D      margin-bottom  5em  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt Detect IE10 and IE11 by CSS Capability Testing lt  h1 gt  x000D   x000D   x000D   lt h2 id  versionId  gt  lt  h2 gt  x000D   x000D   x000D    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

User · Answer

Try this     ------Specific style for IE11---------      -ms-fullscreen   root    legend       line-height  1 5em    position  relative    top  -1 1em

User · Answer

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

User · Answer

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

User · Answer

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    gt   0        browser    IE       ieVersion   6    if  uA indexOf  MSIE 7    gt   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   amp  amp  ieVersion  lt   11      htmlTag className      ie11-

User · Answer

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 gt     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

User · Answer

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

User · Answer

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

User · Answer

Use the following properties      window MSInputMethodContext   document msFullscreenEnabled

User · Answer

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

User · Answer

You can try this   if document documentMode      document documentElement className    ie  document documentMode

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here s an answer for 2017 on  where you probably only care about distinguishing  lt  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

User · Answer

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

[internet-explorer-11] Detecting IE11 using CSS Capability/Feature Detection

Examples related to internet-explorer-11

Examples related to sample

Examples related to feature-detection