Correct Way to Use Modernizr to Detect Ie

Correct way to use Modernizr to detect IE?

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 < 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 && 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;
}

detect internet explorer version using modernizr

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.

Is there a way to perform all Modernizr tests all at once?

It turns out that all the tests are stored as booleans directly in the Modernizr object, so if you're building an application with a lot of feature dependencies and you want to test them all at once, use this:

var supported = true;
for (var feature in Modernizr) {
  if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) {
    supported = false;
    break;
  }
}

Modernizr not detecting capability in Chrome & Firefox

Works for me:

/*! modernizr 3.3.1 (Custom Build) | MIT * * http://modernizr.com/download/?-adownload-setclasses !*/!function(e,n,s){function a(e,n){return typeof e===n}function o(){var e,n,s,o,t,i,f;for(var c in r)if(r.hasOwnProperty(c)){if(e=[],n=r[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(s=0;s<n.options.aliases.length;s++)e.push(n.options.aliases[s].toLowerCase());for(o=a(n.fn,"function")?n.fn():n.fn,t=0;t<e.length;t++)i=e[t],f=i.split("."),1===f.length?Modernizr[f[0]]=o:(!Modernizr[f[0]]||Modernizr[f[0]]instanceof Boolean||(Modernizr[f[0]]=new Boolean(Modernizr[f[0]])),Modernizr[f[0]][f[1]]=o),l.push((o?"":"no-")+f.join("-"))}}function t(e){var n=c.className,s=Modernizr._config.classPrefix||"";if(u&&(n=n.baseVal),Modernizr._config.enableJSClass){var a=new RegExp("(^|\\s)"+s+"no-js(\\s|$)");n=n.replace(a,"$1"+s+"js$2")}Modernizr._config.enableClasses&&(n+=" "+s+e.join(" "+s),u?c.className.baseVal=n:c.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):u?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}var l=[],r=[],f={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var s=this;setTimeout(function(){n(s[e])},0)},addTest:function(e,n,s){r.push({name:e,fn:n,options:s})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr;var c=n.documentElement,u="svg"===c.nodeName.toLowerCase();Modernizr.addTest("adownload",!e.externalHost&&"download"in i("a")),o(),t(l),delete f.addTest,delete f.addAsyncTest;for(var d=0;d<Modernizr._q.length;d++)Modernizr._q[d]();e.Modernizr=Modernizr}(window,document);
/* Test code */if (Modernizr.adownload) {  document.body.innerHTML = "SUPPORT";} else {  document.body.innerHTML = "NO SUPPORT";}

meteor add cwaring:modernizr