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 "HTML5" 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 · 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

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

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

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

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

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

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 <html> conditional comments trick to assign a class:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

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

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

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.

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

The answer is

Detecting CSS 3D transforms

Detecting IE specifically

Examples related to html

Examples related to cross-browser

Examples related to modernizr

Tags