Go JavaScript fast detection of browser support for CSS3 features

transferred from:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/

--------------------------------------------------------------------------------------------------

In the project, you need to quickly detect if 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, in addition to the quick approach described in this article, there is a more famous and more general approach, that is, Modernizr, after running the script it will add a list of all the features supported by the browser on the HTML class.

Advantages:

• JS is configurable and unwanted feature detection can be removed from the configuration script
• Based on feature detection
• JS Library Simple and useful

In addition, there is a less good way, that is to judge the browser UA, the bad reason is that the UA may be forged, and the version is cumbersome and unstable.

Pros: Performance may be optimal

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

Advantages:

• Good performance
• High versatility
• Suitable for detecting individual CSS features

var supports = (function () {var div = document.createelement (' div '), vendors = ' khtml O Moz Webkit '. Split ("), Len = ven Dors.length; return function (prop) {if (prop in Div.style) return True, if ('-ms-' + prop in Div.style) return true; prop = Prop.rep Lace (/^[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 if text is contained in the array, and if so, return true directly.

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

4. It is worth noting that in CSS the property is named:-webkit-transition, but in the DOM style, it is the corresponding webkittransition. I don't know why this is so.

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

Go JavaScript fast detection of browser support for CSS3 features