现代浏览器检测？

Question

What versions of browsers are actually can be named modern? Where css3 and more or less modern features are supported?

• No idea since when opera become modern
• If FF4 can be called modern
• Does Safari less than 5 is that bad?

thanks!

function isOldBrowser() {
    var isOld = false;
    var detect = function(){
        var ua= navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        M = M[2] ? [M[1].toLowerCase(), parseInt(M[2],10)] : [navigator.appName.toLowerCase(), parseInt(navigator.appVersion,10), '-?'];
        if((tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
        return M;
    };
    var browser = detect();

    if (document.all && !document.querySelector) isOld = true; //IE7 or lower
    else if (document.all && document.querySelector && !document.addEventListener) isOld = true; //IE8
    else if (browser[0] == 'firefox' && browser[1] < 4) isOld = true; //FF4+
    else if (browser[0] == 'safari' && browser[1] < 5) isOld = true;  //Safari 5+
    return isOld;
}

Answer 1

Browser sniffing is almost always a bad idea . Use Modernizr and feature detection instead to serve up alternative content if you wish to support older browsers. You can refer to caniuse to find out which features are supported by which browsers, too.

Answer 2

This works for me:

    var isModernBrowser = typeof(Intl) != "undefined";

The other thing this does is if you're running Internet Explorer 11, but under SharePoint (even with latest SharePoint 2016), it will correctly return false because SharePoint forces the page to document.documentMode == 8.

Answer 3

There is a good read on this by Philip Walton: https://philipwalton.com/articles/loading-polyfills-only-when-needed/

The easiest way to have your code run immediately for most of you users, yet halt execution until polyfills are loaded for all other users is to structure your site so all code paths have a single entry point.

In the case of the website linked above, here is the function used:

function browserSupportsAllFeatures() {
  return window.Promise && window.fetch && window.Symbol;
}

In my case, I am using something similar:

const isModernBrowser = () => {
  return 'fetch' in window &&
  'Promise' in window &&
  'assign' in Object &&
  'keys' in Object
}