JavaScript feature detection is not browser detection_javascript tips

I have roughly translated part of the article. There may be some misunderstandings. Please correct me. It’s worth mentioning that the debate in the comments section is also worth reading.

Feature Detection
At first, front-end engineers strongly opposed browser detection. They believed that methods like user-agent sniffing were very bad because it was not a This is future-proof code that cannot adapt to new browser versions. A better approach is to use feature detection, like this:

Copy the code The code is as follows:

if (navigator.userAgent.indexOf("MSIE 7") > -1){
//do something
}

A better way is:

Copy code The code is as follows:

if(document.all){
//do something
}

The two methods are not the same. The former is to detect the special name and version of the browser; the latter is to detect the characteristics of the browser. UA sniffing can accurately obtain the type and version of the browser (at least the browser type), while feature detection is to determine whether the browser owns a certain object or supports a certain method. Note that these two are completely different.
Because feature detection depends on which browsers support it, tedious confirmation work is required when a new version of the browser appears. For example, when the DOM standard first appeared, not all browsers supported the getElementById() method, so the initial code might look like this:

Copy code The code is as follows:

if(document.getElementById){ //DOM
element = document.getElementById(id);
} else if (document.all) { //IE
element = document.all[id];
} else if (document.layers){ //Netscape < 6
element = document.layers[id];
}

This is a good example of feature detection. The highlight is that when other browsers start to support the getElementById() method, there is no need to modify the code.
Mixed method
Later, the front-end engineers considered an improved way of writing, and the code changed like this:

Copy the code The code is as follows :

//AVOID!!!
if (document.all) { //IE
id = document.uniqueID;
} else {
id = Math .random();
}

The problem with this code is to determine whether it is IE by detecting the document.all attribute. When identifying IE, it is safe to assume that the private document.uniqueID property is used. However, what is currently done is only to determine whether document.all is supported, not to identify whether the browser is IE. Just supporting document.all does not mean that document.uniqueID is available.
Later people began to write like this, replacing the above line with the following line:
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
//The following line replaced the above line
var isIE = !!document.all; These changes indicate that everyone has a misunderstanding about "Don't use UA sniffing" - the browser's detailed information is no longer detected, but is inferred through feature support. This method of detecting based on browser features is very bad.
Later, the front-ends discovered that document.all was not reliable, and a better way to detect IE became:
var isIE = !!document.all && document.uniqueID; This implementation went astray. Not only does it take time and effort to identify the feature support added by the browser, but it is also impossible to be sure that other browsers will start to support the same features.
If you think code like this is not widely used, take a look at this code snippet from an older version of Mootools:

Copy code The code is as follows:

//from MooTools 1.1.2
if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;
else if ( document.getBoxObjectFor != null || window.mozInnerScreenX != null) window.gecko = true;

Note how it uses feature detection. I can point out a series of problems, such as mistaking ie8 for ie7 by detecting window.ie.
Aftermath
With the rapid development of browsers, using feature detection has become increasingly difficult and unreliable. But Mootools 1.2.4 still uses this method, for example: getBoxObjectFor().

Copy code The code is as follows:

//from MooTools 1.2.4
var Browser = $merge({
Engine: {name: 'unknown', version: 0},
Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match( /mac|win|linux/i) || ['other'])[0].toLowerCase()},
Features: {xpath: !!(document.evaluate), air: !!(window.runtime ), query: !!(document.querySelector)},
Plugins: {},
Engines: {
presto: function(){
return (!window.opera) ? false : ( (arguments.callee.caller) ? 960: ((document.getElementsByClassName) ? 950: 925)); ((window.XMLHttpRequest)? ((document.querySelectorAll)? 6:5):4); Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419); mozInnerScreenX == null) ? false: ((document.getElementsByClassName) ? 19 : 18); How to do it?
Feature detection is a method that should be avoided, although direct feature detection is a good method and can meet the needs in most cases. Generally, it is enough to know whether this feature has been implemented before testing, without considering the relationship between them.
I'm not saying never use browser feature detection but rather UA sniffing, because I believe it still has many uses, however I don't believe it has many legitimate uses. If you are considering UA sniffing, please implement this idea first: the only safe way is to target a specific version of a specific browser, and anything beyond that is unreliable - such as new browser versions. In fact, this is also a wise approach, because compared with forward compatibility with uncertain new versions, backward compatibility with old versions is the easiest way.