detect internet explorer version using modernizr

Question

I am new to using modernizr, but as I understand its fundamental purpose, it can detect the features of a browser. In this SO Post: Request.Browser.Browser in chrome returning "IE" the first answer implies this can be done in code behind.

 string s = "Browser Capabilities\n"
            + "Type = " + browser.Type + "\n"
            + "Name = " + browser.Browser + "\n"
            + "Version = " + browser.Version + "\n"
            + "Major Version = " + browser.MajorVersion + "\n"
            + "Minor Version = " + browser.MinorVersion + "\n"
            + "Platform = " + browser.Platform + "\n"
            + "Is Beta = " + browser.Beta + "\n"
            + "Is Crawler = " + browser.Crawler + "\n"
            + "Is AOL = " + browser.AOL + "\n"
            + "Is Win16 = " + browser.Win16 + "\n"
            + "Is Win32 = " + browser.Win32 + "\n"
            + "Supports Frames = " + browser.Frames + "\n"
            + "Supports Tables = " + browser.Tables + "\n"
            + "Supports Cookies = " + browser.Cookies + "\n"
            + "Supports VBScript = " + browser.VBScript + "\n"
            + "Supports JavaScript = " +
                browser.EcmaScriptVersion.ToString() + "\n"
            + "Supports Java Applets = " + browser.JavaApplets + "\n"
            + "Supports ActiveX Controls = " + browser.ActiveXControls
                  + "\n"
            + "Supports JavaScript Version = " +
                browser["JavaScriptVersion"] + "\n";

Can this also be accomplished natively in Modernizr, or is there a feature similar to this that can accomplish the intended task?

Update: To clarify, the intended purpose of doing this is to be able to detect certain version numbers of internet explorer, to make users aware they are using an unsupported version of the browser, so that they do not reach a point where the failure is an issue.

Getting the specific version is harder than it sounds, partly because parsing the user-agent string is the "official" way to do this and it's [varied a great deal](https://msdn.microsoft.com/en-us/library/hh869301(v=vs.85).aspx) over the years. Typically, most folks simply look for the features they need and display a message if those aren't available. (Also, the user-agent string varies according to "browser mode" and other user-controllable settings, so it's really not reliable.) — Lance Leonard, Mar 20 '17 at 19:46
@LanceLeonard Thank you for your response. I found a non modernizr work around, but I didn't want to post the answer, since it had nothing to do with the OP. — jpears, Mar 20 '17 at 20:48
Possible duplicate of [Correct way to use Modernizr to detect IE?](https://stackoverflow.com/questions/13478303/correct-way-to-use-modernizr-to-detect-ie) — LCJ, May 22 '17 at 22:11

score 2 · Accepted Answer · answered Mar 22 '17 at 07:03

UserAgent Sniffing is bad as IE can send any old UAS in the request header depending on the x-ua setting in the request header, page meta or Enterprise Site Mode lists. Here is a client side idiom that detects the IE emulation mode based on feature detection.

function getIEVersion(odoc){
if (odoc.body.style.scrollbar3dLightColor!=undefined)
    {
    if (!!win.WebGLRenderingContext) {return 'IE11';}
    else if (odoc.body.style.msGridRows!=undefined) {return 'IE10';}
    else if (odoc.body.style.opacity!=undefined) {return 'IE9';}
    else if (odoc.body.style.msBlockProgression!=undefined) {return 'IE8';}
    else if (odoc.body.style.msInterpolationMode!=undefined) {return 'IE7';}
    else if (odoc.body.style.textOverflow!=undefined) {return 'IE6'}
    else {return 'IE5.5 or lower';}
    }
}

Usage: var EmulationVersion = getIEVersion(document);

Use the Emulation tab of the dev tool to change the emulation mode of IE11 or lower to test. On the Emulation tab you can also customize the request UserAgent string to test any server side browser caps assumptions.

A generic feature test is if('addEventListener' in window)// which indicates that the client browser is using at least IE9 emulation or is a 'modern' browser. Officially MS only supports IE11 (which can assume any Emulation Mode of a lower version of IE). See caniuse.com for a full listing of features support by browser version. Remember in IE you are testing for feature support in the browsers Emulation Mode that it is assuming (set by x-ua header/meta or Enterprise Site Mode lists), not its version number in the navigator object or the version number or update version KB number from the About menu.

win.WebGLRenderingContext should be window.WebGLRenderingContext. — Hampei, Jul 11 '17 at 14:05

score 0 · Answer 2 · answered Mar 20 '17 at 20:52

Due to certain time constraints, I had to use another method to work around this issue. We decided to go with a Javascript check to see where the issue was arising from. I am posting the results of my success in case anyone in the future needs to address a similar issue.

ar version = detectIE();

if (version === false) {
    document.getElementById('result').innerHTML = '<s>IE/Edge</s>';
} else if (version >= 12) {
    document.getElementById('result').innerHTML = 'Edge ' + version;
} else {
    document.getElementById('result').innerHTML = 'IE ' + version;
    if (version == 11) {
        ('#browserNotSupported').modal('show')
        alert('This is still firing')
    }
    console.log(version)
}


// add details to debug result
//document.getElementById('details').innerHTML = window.navigator.userAgent;

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
    var ua = window.navigator.userAgent;


    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
        // Edge (IE 12+) => return version number
        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}

Found at this address: https://codepen.io/gapcode/pen/vEJNZN

detect internet explorer version using modernizr

2 Answers2