javascript - Modern browsers detection? - Stack Overflow

admin管理员组

文章数量:1318564

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

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

• javascript
• css

Share Improve this question Follow asked Dec 12, 2013 at 9:16 Sergei ZahharenkoSergei Zahharenko 1,5241212 silver badges1616 bronze badges 2

• 4 Don't do user agent parsing! – user247702 Commented Dec 12, 2013 at 9:21
• 1 Why would you need to know if something is "old" or "modern"? If you need to check if a certain CSS3 feature is present in any given browser then you can use Modernizr - modernizr. – Mark Commented Dec 12, 2013 at 9:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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.

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.

There is a good read on this by Philip Walton: https://philipwalton./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
}

本文标签： javascriptModern browsers detectionStack Overflow