How does JavaScript judge the browser type

On the Internet, most of the browser types are judged by the user agent field. However, this method is unreliable because the user agent can be easily modified.

This method of judgment described below is consistent with“Duck type”Style.

Duck type(English:duck typing）In programming, it is a style of dynamic type. In this style, the effective semantics of an object is determined not by inheriting from a specific class or implementing a specific interface, but by “a collection of current methods and properties.”. “Duck test” can be expressed as follows:

“When you see a bird walk like a duck, swim like a duck, and sing like a duck, then the bird can be called a duck.”

Use this browser detection method only when you really need it, such as displaying browser specific installation extensions.Use feature detection as much as possible。

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@[email protected]*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

reliability analysis

Previous methods rely on the properties of the rendering engine（-moz-box-sizing and -webkit-transform）To determine the browser type. These prefixes will eventually be discarded. So I switched to a more robust approach – through specific browser features.

• Internet Explorer: conditional compilation of JScript (up to IE9) anddocument.documentMode。
• Edge: in Trident and edge browsers, Microsoft providesStyleMediaConstructor
• Edge (based on chromium kernel): at the end of user agent, the following values are included:Edg/[version]For example:(ex: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9")
• Firefox: its API for installing add ons:InstallTrigger
• Chrome: global objectschromeThere is one of its attributeschrome.webstoreObject. But in the latest version,chrome.webstoreIt will be abandoned.
• Safari: by checking theSafariRemoteNotificationTo cover Safari version 3.0 and later.
• Opera： window.operaIt’s been around for many years, but will be obsolete as opera replaces the kernel with blink + V8.

  In opera 15, the user agent field is more like chrome, but “OPR” is added. In this edition,chromeObjects are also defined, but they are notchrome.webstore。 Since opera started trying to clone chrome, I’ve used the user agent to judge it.

  !!window.opr && opr.addonsIt can still be used to identify opera versions above 20!

• Blink: when Google upgraded chrome to version 28,CSS.supports()It was introduced into blink. Naturally, the same blink will be used by opera.

Successful Browser Test

• Firefox 0.8 – 61
• Chrome 1.0 – 71
• Opera 8.0 – 34
• Safari 3.0 – 10
• IE 6 – 11
• Edge – 20-42
• Edge Dev – 80.0.361.9