JavaScript quick detection of browser support for CSS3 features

In the project, you need to quickly check whether the browser supports a certain CSS3 feature, for example, whether "transform" is supported, and my layout will have two completely different la S.

Of course, in addition to the fast method described in this article, there is also a more famous and more general method, that is, modernizr, after running the script, it adds a list of all the features supported by the browser to the html class.

Advantages:

Js is configurable. You can remove the feature-based detection js library from the configuration script for simple and easy-to-use features.

In addition, there is also a bad method, that is, to judge the UA of the browser. The bad reason is that the UA may be forged, and the version judgment is cumbersome and unstable.

Advantage: performance may be optimal

Finally, this method is introduced in this article. I wrote a function to quickly check whether the browser supports a certain CSS feature, A suitable scenario is to quickly know whether the browser supports a certain CSS feature (rather than several ).

Advantages:

Good performance versatility suitable for detecting single CSS features
Copy codeThe Code is as follows:
Var supports = (function (){
Var div = document. createElement ('div '),
Vendors = 'khtml O Moz Webkit '. split (''),
Len = vendors. length;
Return function (prop ){
If (prop in div. style) return true;
If ('-ms-' + prop in div. style) return true;
Prop = prop. replace (/^ [a-z]/, function (val ){
Return val. toUpperCase ();
});
While (len --){
If (vendors [len] + prop in div. style ){
Return true;
}
}
Return false;
};
})();
If (supports ('textshadow ')){
Document.doc umentElement. className + = 'textshadow ';
}

This is the final code. The principle is:

1. Create a div and obtain the div. style, which is an array list of its supported attributes.

2. Check whether text is included in the array. If yes, return true directly.

3. Check various prefixes, such as Webkit plus text, that is, webkitTransition. If the prefix is included in the style, true is returned.

4. It is worth noting that the attribute name in CSS is-webkit-transition, but in the DOM style, it corresponds to webkitTransition. I don't know why.

References: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/