JavaScript quickly detects browser support for CSS3 features_javascript tips

In the project, I need to quickly detect whether the browser supports a certain CSS3 feature, such as detecting whether it supports "transform", and then my layout will have two completely different layouts.

Of course, in addition to the quick method introduced in this article, there is also a more famous and common method, that is modernizr. After running the script, it will add the browser support to the html class. List of all properties.

Advantages:

js is configurable, and unnecessary feature detection can be removed in the configuration script. The js library based on feature detection is simple and easy to use.

In addition, there is another not-so-good method, which is to determine the UA of the browser. The bad reason is that the UA may be forged, and the version judgment is cumbersome and unstable.

Advantages: Performance may be optimal

The last one is the method introduced in this article. I wrote a function to quickly detect whether the browser supports a certain CSS feature. It is suitable for scenarios where you need to quickly know whether the browser supports a certain CSS feature (rather than several).

Advantages:

Good performance, strong versatility, suitable for detecting single CSS properties

Copy code The 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.documentElement.className = ' textShadow';
}

This is the final code, the principle is:

1. Create a div, and then get div.style, which is an array list of attributes it supports.

2. Check whether text is included in the array, if so, return true directly.

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

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 this is happening either.

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