In his blog Featuredetectionisnotbrowserdetection of the same name, NCZ describes a popular technology that has been used in front-end development-detection of users' browser platforms, and details historical development and advantages and disadvantages of various methods. I have roughly translated some articles and may have some misunderstandings. please correct me. It is worth noting that the comments are also worth reading.
Feature Detection
At first, front-end engineers opposed browser detection. They thought the user-agent sniffing method was very bad because it was not a future-oriented code, the browser cannot adapt to the new version. A better way is to use feature detection, like this:
The Code is as follows:
If (navigator. userAgent. indexOf ("MSIE 7")>-1 ){
// Do something
}
The better practice is as follows:
The Code is as follows:
If (document. all ){
// Do something
}
These two methods are different. The former is the special name and version of the browser, while the latter is the characteristic of the browser. UA sniffing can accurately obtain the browser type and version (at least the browser type can be known), while feature detection determines whether the browser has an object or supports a method. Note that the two are completely different.
Because Feature Detection depends on the browser support, it requires tedious validation when a new version of the browser appears. For example, when the DOM standard emerged, not all browsers support the getElementById () method, so the initial code may be as follows:
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 you do not have to modify the code when other browsers start to support the getElementById () method.
Hybrid mode
Later, the front-end engineers considered the Improved Writing method, and the code changed to this:
The Code is as follows:
// AVOID !!!
If (document. all) {// IE
Id = document. uniqueID;
} Else {
Id = Math. random ();
}
The problem with this code is to check whether the document. all attribute is IE. After IE is determined, it is assumed that the private document. uniqueID attribute is secure. However, the current task is to determine whether document. all is supported, not to identify whether the browser is IE. Only document. all is supported, which does not mean document. uniqueID is available.
Later, people started writing like this and replaced the above with the following line:
Var isIE = navigator. userAgent. indexOf ("MSIE")>-1;
// The following line replaces the above line
Var isIE = !! Document. all; these changes indicate that there is a misunderstanding about "do not use UA sniffing". Instead, we will not detect the details of the browser. Instead, we will infer the changes through feature support. This method based on browser features is very poor.
Later, the front-end found that document. all was not reliable, and the better IE detection was changed:
Var isIE = !! Document. all & document. uniqueID; this implementation method goes astray. It is not only time-consuming to identify the added feature support of the browser, but also cannot be determined that other browsers start to support the same feature.
If you think this code is not widely used, let's look at the original version of Mootools code snippet:
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. window innerscreenx! = Null) window. gecko = true;
Note how it uses feature detection. I can point out a series of problems. For example, if we detect window. ie, We will mistake ie8 as ie7.
Yubo
With the rapid development of browsers, it is increasingly difficult and unreliable to use feature detection. However, Mootools 1.2.4 still uses this method, for example, getBoxObjectFor ().
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 ));
},
Trident: function (){
Return (! Window. ActiveXObject )? False: (window. XMLHttpRequest )? (Document. querySelectorAll )? 6: 5): 4 );
},
Webkit: function (){
Return (navigator. taintEnabled )? False: (Browser. Features. xpath )? (Browser. Features. query )? 525: 420): 419 );
},
Gecko: function (){
Return (! Document. getBoxObjectFor & window. Fig = null )? False: (document. getElementsByClassName )? 19: 18 );
}
}
}, Browser | {});
What should I do?
Feature Detection is a method that should be avoided, although direct feature detection is a good method that can meet requirements in most cases. Generally, you only need to know whether this feature is implemented before detection, without considering the relationship between them.
I do not mean that browser feature detection is never used, but based on UA sniffing, because I believe it still has many purposes, but I do not believe it has many reasonable uses. If you consider UA sniffing, first implement this idea: the only safe way is for a specific version of a specific browser, out of scope is not reliable-such as a new browser version. In fact, this is also a wise way to do this, because backward compatibility with the old version is the simplest practice compared to the new version with backward compatibility uncertainty.
