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

134 阅读 0 评论 89 点赞

我是靠谱客的博主鳗鱼泥猴桃，最近开发中收集的这篇文章主要介绍JavaScript快速检测浏览器对CSS3特性的支持情况，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在项目中需要快速检测浏览器是否支持某CSS3特性，比如检测是否支持“transform”，然后我的布局会有两种完全不同的版式。

当然除开本文介绍的这种快速方法，还有一种更有名和更通用的方法，那就是modernizr，运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表。

优点：

js是可配置的，不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用

modernizr

除此之外还有一种不太好的方法，那就是判断浏览器的UA，不好的原因是UA可能会伪造，而且版本判断繁琐，还有不稳定。

优点：性能可能是最优的

最后就是本文介绍的这个方法，我写了一个函数快速检测是否浏览器支持某CSS特性，适合的场景是快速需要知道浏览器是否支持某一个CSS特性（而不是好几个）。

优点：

性能不错通用性强适合检测单个CSS特性

复制代码代码如下:

 
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'; 
} 