Correct way to use Modernizr to detect IE

Question

I wanted to use the Modernizr JS library to detect for some browser properties to determine what content to show or not show  I have an app called Pano2VR which outputs both HTML5 and SWF  I need the HTML5 for iOS device users  However  IE does not render this  quot HTML5 quot  output at all  It seems their output uses CSS3 3D transforms and WebGL  one or more apparently unsupported in IE9  So  for those users I need to display the Flash version  I was planning to use an IFRAME and either pass the SRC via a Modernizr script or document write out the correct IFRAME code depending on browser  All of which leads to how do I use Modernizr to detect simply IE or not IE  Or detect for CSS 3d transforms  Or is there another way to do this

User · Accepted Answer

I agree we should test for capabilities  but it s hard to find a simple answer to  what capabilities are supported by  modern browsers  but not  old browsers     So I fired up a bunch of browsers and inspected Modernizer directly  I added a few capabilities I definitely require  and then I added  inputtypes color  because that seems to cover all the major browsers I care about  Chrome  Firefox  Opera  Edge   and NOT IE11  Now I can gently suggest the user would be better off with Chrome Opera Firefox Edge   This is what I use - you can edit the list of things to test for your particular case  Returns false if any of the capabilities are missing          Check browser capabilities      public CheckBrowser    boolean       let tests     csstransforms3d    canvas    flexbox    webgl    inputtypes color            Lets see what each browser can do and compare          console log  Modernizr   Modernizr        for  let i   0  i  lt  tests length  i                     if you don t test for nested properties then you can just use             if   Modernizr tests i     instead         if   ObjectUtils GetProperty Modernizr  tests i                          console error  Browser Capability missing      tests i                return false                       return true      And here is that GetProperty method which is needed for  inputtypes color           Get a property value from the target object specified by name         The property name may be a nested property  e g   Contact Address Code          Returns undefined if a property is undefined  an existing property could be null      If the property exists and has the value undefined then good luck with that      public static GetProperty target  any  propertyName  string   any       if    target  amp  amp  propertyName                 return undefined             var o   target       propertyName   propertyName replace      w     g     1        propertyName   propertyName replace                  var a   propertyName split            while  a length                var n   a shift             if  n in o                        o   o n                if  o    null                                return undefined                                  else                       return undefined                       return o

User · Answer

You can use Modernizr to detect simply IE or not IE  by checking for SVG SMIL animation support   If you ve included SMIL feature detection in your Modernizr setup  you can use a simple CSS approach  and target the  no-smil class that Modernizr applies to the html element   html no-smil        IE Edge specific styles go here - hide HTML5 content and show Flash content        Alternatively  you could use Modernizr with a simple JavaScript approach  like so   if   Modernizr smil          set HTML5 content      else        set IE Edge Flash content        Bear in mind  IE Edge might someday support SMIL  but there are currently no plans to do so   For reference  here s a link to the SMIL compatibility chart at caniuse com

User · Answer

Modernizr doesn t detect browsers as such  it detects which feature and capability are present and this is the whole jist of what it s trying to do   You could try hooking in a simple detection script like this and then using it to make your choice  I ve included Version Detection as well just in case that s needed  If you only want to check of any version of IE you could just look for the navigator userAgent having a value of  MSIE     x000D   x000D  var BrowserDetect     x000D          init  function      x000D              this browser   this searchString this dataBrowser      Other   x000D              this version   this searchVersion navigator userAgent     this searchVersion navigator appVersion      Unknown   x000D             x000D          searchString  function  data    x000D              for  var i   0  i  lt  data length  i      x000D                  var dataString   data i  string  x000D                  this versionSearchString   data i  subString  x000D   x000D                  if  dataString indexOf data i  subString      -1    x000D                      return data i  identity  x000D                    x000D                x000D             x000D          searchVersion  function  dataString    x000D              var index   dataString indexOf this versionSearchString   x000D              if  index     -1    x000D                  return  x000D                x000D   x000D              var rv   dataString indexOf  rv     x000D              if  this versionSearchString      Trident   amp  amp  rv     -1    x000D                  return parseFloat dataString substring rv   3    x000D                else   x000D                  return parseFloat dataString substring index   this versionSearchString length   1    x000D                x000D             x000D   x000D          dataBrowser    x000D               string  navigator userAgent  subString   Edge   identity   MS Edge    x000D               string  navigator userAgent  subString   MSIE   identity   Explorer    x000D               string  navigator userAgent  subString   Trident   identity   Explorer    x000D               string  navigator userAgent  subString   Firefox   identity   Firefox    x000D               string  navigator userAgent  subString   Opera   identity   Opera      x000D               string  navigator userAgent  subString   OPR   identity   Opera      x000D   x000D               string  navigator userAgent  subString   Chrome   identity   Chrome     x000D               string  navigator userAgent  subString   Safari   identity   Safari          x000D            x000D         x000D       x000D      BrowserDetect init    x000D      document write  You are using  lt b gt     BrowserDetect browser     lt  b gt  with version  lt b gt     BrowserDetect version     lt  b gt     x000D   x000D   x000D    You can then simply check for    BrowserDetect browser     Explorer   BrowserDetect version  lt   9

User · Answer

CSS tricks have a good solution to target IE 11   http   css-tricks com ie-10-specific-styles   The  NET and Trident 7 0 are unique to IE so can be used to detect IE version 11   The code then adds the User Agent string to the html tag with the attribute  data-useragent   so IE 11 can be targeted specifically

User · Answer

I needed to detect IE vs most everything else and I didn t want to depend on the UA string  I found that using es6number with Modernizr did exactly what I wanted  I don t have much concern with this changing as I don t expect IE to ever support ES6 Number  So now I know the difference between any version of IE vs Edge Chrome Firefox Opera Safari   More details here  http   caniuse com  feat es6-number  Note that I m not really concerned about Opera Mini false negatives  You might be

User · Answer

Detecting CSS 3D transforms  Modernizr can detect CSS 3D transforms  yeah  The truthiness of Modernizr csstransforms3d will tell you if the browser supports them   The above link lets you select which tests to include in a Modernizr build  and the option you re looking for is available there     Detecting IE specifically  Alternatively  as user356990 answered  you can use conditional comments if you re searching for IE and IE alone  Rather than creating a global variable  you can use HTML5 Boilerplate s  lt html gt  conditional comments trick to assign a class    lt  -- if lt IE 7  gt        lt html class  no-js lt-ie9 lt-ie8 lt-ie7  gt   lt   endif -- gt   lt  -- if IE 7  gt           lt html class  no-js lt-ie9 lt-ie8  gt   lt   endif -- gt   lt  -- if IE 8  gt           lt html class  no-js lt-ie9  gt   lt   endif -- gt   lt  -- if gt IE 8  gt  lt  -- gt   lt html class  no-js  gt   lt  -- lt   endif -- gt    If you already have jQuery initialised  you can just check with    html   hasClass  lt-ie9    If you need to check which IE version you re in so you can conditionally load either jQuery 1 x or 2 x  you can do something like this   myChecks ltIE9    function        var htmlElemClasses   document querySelector  html   className split           if   htmlElemClasses  return false       for  var i   0  i  lt  htmlElemClasses length  i    1          var klass   htmlElemClasses i         if  klass      lt-ie9            return true                    return false          N B  IE conditional comments are only supported up to IE9 inclusive  From IE10 onwards  Microsoft encourages using feature detection rather than browser detection     Whichever method you choose  you d then test with  if   myChecks ltIE9    Modernizr csstransforms3d           iframe or flash fallback      Don t take that    literally  of course

User · Answer

You can use the  lt   --  if IE    hack to set a global js variable that then gets tested in your normal js code  A bit ugly but has worked well for me

User · Answer

If you re looking for a JS version  using a combination of feature detection and UA sniffing  of what html5 boilerplate used to do   var IE       window ActiveXObject  amp  amp     msie s  d   i exec navigator userAgent  1       NaN  if  IE  lt  9        document documentElement className      lt-ie9      ie    IE

User · Answer

Well  after doing more research on this topic I ended up using following solution for targeting IE 10   As IE10 amp 11 are the only browsers which support the -ms-high-contrast media query  that is a good option without any JS    media screen and  -ms-high-contrast  active   screen and  -ms-high-contrast  none            IE10  specific styles go here          Works perfectly

[html] Correct way to use Modernizr to detect IE?

Examples related to html

Examples related to cross-browser

Examples related to modernizr