Rectangle 27 0

html5 Correct way to use Modernizr to detect IE?


var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

If you're looking for a JS version (using a combination of feature detection and UA sniffing) of what html5 boilerplate used to do:

Note
Rectangle 27 0

html5 Correct way to use Modernizr to detect IE?


html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}
if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

@Jason I've edited for further info and caution.

Alternatively, you could use Modernizr with a simple JavaScript approach, like so:

Bear in mind, IE/Edge might someday support SMIL, but there are currently no plans to do so.

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:

While this does work, it works for now. The whole point of feature detection and Modernizr is that you don't have to worry about what happens tomorrow. If Edge updates tomorrow with smil support, your code no longer works and you may not even know it.

You can use Modernizr to detect simply IE or not IE, by checking for SVG SMIL animation support.

Note
Rectangle 27 0

html5 Correct way to use Modernizr to detect IE?


<!--[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]-->
Modernizr.csstransforms3d
if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}
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;
}());

@Chris oh, sorry. I thought you were condemning me for including the IE test.

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:

Don't take that || literally, of course.

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:

The above link lets you select which tests to include in a Modernizr build, and the option you're looking for is available there.

Yours was the first answer that actually suggests using feature detect so figured it might help another person if they read the comment

Note
Rectangle 27 0

html5 Correct way to use Modernizr to detect IE?


Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable.
BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;
var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

@Wintamute, can't agree more. Get sick of "feature detection is evil" kind of lecture. We are doing engineering, not pursuing art

It is the general assumption that if someone modifies their UA string, then they know what they're doing and they can deal with the consequences. In fact this is exactly what the UA string exists for - to declare browser version to the server. If the client wants to lie about that, then well, that's just life! Of course there is a small possibility of the string being change without the user's consent but in practice that's not a real concern - and hey are we supposed to feed the user and rub their back too?

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.

Thanks. I wound up finally tracking down that the issue was their file needed webgl support. So, I could use Modernizer to test for that and do a document.write of one code block of the other. But this is an excellent solution for browser detection. Thanks again.

Yes, but what percentage of users are browsing the web with a modified/spoofed/incorrect UA string? How much engineering time do you want to spend ensuring that tiny minority has an optimal experience on your site? Browser sniffing via UA string is a practical and sane approach.

You can then simply check for:

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

Note