JavaScript Fast detection browser support for CSS3 features _javascript tips

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

Of course, aside from the quick approach described in this article, there is a more well-known and more general approach, which is Modernizr, which, after running the script, adds a list of all the features supported by the browser on the HTML class.

Advantages:

JS is configurable, unwanted feature detection can be removed in the configuration script based on feature detection JS Library simple and easy to use

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

Advantage: Performance may be optimal

Finally, this is the method described in this article, I wrote a function to quickly detect whether the browser supports a CSS feature, the appropriate scenario is a quick need to know whether the browser supports a CSS feature (rather than several).

Advantages:

Good performance common strong fit to detect a single CSS feature

Copy Code code 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 you can get Div.style, which is the list of arrays of properties that it supports.

2. Check that the text is contained in the array and, if so, return true directly.

3. Check for various prefixes, such as WebKit plus text, that is, webkittransition, if included in style, returns True.

4. It is noteworthy that in CSS the property name is:-webkit-transition, but in the DOM style, it is the corresponding webkittransition. And I don't know why.

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