本文介绍如何使用JavaScript脚本检测浏览器是否支持特定的CSS3属性。通过遍历标准前缀（如webkit、Moz等）及无前缀形式，判断DOM元素style对象中是否存在该属性，从而返回布尔值结果，适用于CSS3动画库开发前的兼容性校验。
CSS3属性兼容性检测原理
1、引子
CSS3的引入使得浏览器视觉效果更加丰富，其中动画效果的视觉冲击力尤为显著。在日常开发动画时，预先判断浏览器是否支持相关属性至关重要，特别是在构建CSS3动画库的过程中。例如，transition中的animation-play-state属性仅被部分浏览器支持。
2、检测方法
以下方法可通过脚本判断浏览器是否支持某一个CSS3属性：
/**
* 判断浏览器是否支持某一个CSS3属性
* @param {String} 属性名称
* @return {Boolean} true/false
* @version 1.0
* @author ydr.me
* 2014年4月4日14:47:19
*/
function supportCss3(style) {
var prefix = ['webkit', 'Moz', 'ms', 'o'],
i,
humpString = [],
htmlStyle = document.documentElement.style,
_toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
return $1.toUpperCase();
});
};
for (i in prefix)
humpString.push(_toHumb(prefix[i] + '-' + style));
humpString.push(_toHumb(style));
for (i in humpString)
if (humpString[i] in htmlStyle) return true;
return false;
}3、使用方法
alert(supportCss3('animation-play-state'));