JavaScript快速检测浏览器对CSS3特性的支持

在项目中，需要快速检测浏览器是否支持CSS3功能，比如“transform”，然后我的布局就会有两种完全不同的格式。当然，除了本文介绍的quick方法之外，还有一个更著名、更通用的方法，即modernizr，它在运行脚本后，将浏览器支持的所有功能的列表添加到html类中。优点：js是可配置的，可以从配置脚本中删除不必要的特性检测。基于特征检测的js库简单易用。

另外还有一个不好的方法，就是判断浏览器的UA。不好的原因是UA可能是伪造的，版本判断繁琐不稳定。优点：性能可能是最好的。最后，本文介绍了这种方法。我写了一个函数来快速检测浏览器是否支持某种CSS特性。合适的场景是快速知道浏览器是否支持某个CSS特性(而不是几个)。优点：性能好，通用性强，适合检测个人CSS特征。复制的代码代码如下： var supports=(function(){ var div=document . create element(' div ')，vendors=' khtml mozwebkit '。split(')，len=vendors.length返回函数(prop) { if (prop in div.style)返回trueif ('-ms-' prop in div.style)返回trueprop=prop.replace(/^[a-z]/，function(val){ return val . touppercase()；});while(len-){ if(div . style中的供应商[len]prop){ return true；} }返回false};})();if(支持(' textShadow '){ document . document element . class name=' textShadow '；}这是最终代码。原则是：1。创建一个div，然后获取div.style，这是它支持的属性的数组列表。

2.检查数组中是否包含文本，如果包含，直接返回true。3.检查各种前缀，如Webkit plus text，即webkitTransition，如果包含在样式中，则返回true。4.值得注意的是，在CSS中，属性名为：-webkit-transition，但在DOM样式中，它对应的是webkitTransition。我不知道为什么会这样。参考：http://net . tutplus.com/教程/html-CSS-technologies/quick-tip-detect-CSS-浏览器中支持-带JavaScript/