JavaScript quick detection of browser support for CSS3 features _ javascript tips-js tutorial

In the project, you need to quickly check whether the browser supports a certain CSS3 feature, for example, whether "transform" is supported ", then, my layout has two completely different la S. In the project, you need to quickly check whether the browser supports a certain CSS3 feature, for example, whether the browser supports "transform ", then 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

The Code is as follows:

Var supports = (function (){
Var p = document. createElement ('P '),
Vendors = 'khtml O Moz Webkit '. split (''),
Len = vendors. length;
Return function (prop ){
If (prop in p. style) return true;
If ('-ms-' + prop in p. style) return true;
Prop = prop. replace (/^ [a-z]/, function (val ){
Return val. toUpperCase ();
});
While (len --){
If (vendors [len] + prop in p. style ){
Return true;
}
}
Return false;
};
})();
If (supports ('textshadow ')){
Document.doc umentElement. className + = 'textshadow ';
}

This is the final code. The principle is:

1. Create a p file and obtain the p. style file. This is an array list of the properties supported by p. style.

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/