CODEWITHSUNDEEP
javascriptcss
Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

Modern browsers detection?

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

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

Upvotes: 3

Views: 2846

Answers (3)

Kevin Farrugia
Kevin Farrugia

Reputation: 7449

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
}

Upvotes: 1

zumalifeguard
zumalifeguard

Reputation: 9016

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.

Upvotes: 3

Ben
Ben

Reputation: 10146

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.

Upvotes: 6

Related Questions