测试浏览器是否支持某个CSS属性
花了几个小时写了个API，为了兼容多种用法和测试花了不少时间，求鞭打、嘲笑和建议。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
//Cound use four types of propertyName,like:
//'animation','-webkit-animation','webkit-animation','webkitAnimation'
function isSupportCSS(propertyName) {
var div = document.createElement('div'),
getComputedStyle = window.getComputedStyle || (document.defaultView && document.defaultView.getComputedStyle),
result,
body = document.body || document.getElementsByTagName('body')[0],
currentStyle,
//to replace propertyName from dash style to camel case
rcamelCase = /-([\da-z])/gi,
//to see the function expression toCamelCase。we need the first character of propertyName is Uppercase，like 'MozAnimation',when the browser is FF.
//so we need to keep the first dash when the browser is FF.
rprefix = /^-(?!moz)/i,
toCamelCase = function (string) {
return string.replace(rprefix,'').replace(rcamelCase,function (all,letter) { return letter.toUpperCase();});
},
prefixArray = ['webkit-','moz-','ms-'],
i = prefixArray.length,
rhasPrefix = /^-?(webkit|moz|ms)/i,
//Could you show me a better way to test whether some property need to add the prefix?
sCSS3 = 'animation|appearance|backface|background|border|box|clip|column|filter|font|highlight|hyphenate|'+
'line|locale|locale|margin|mask|perspective|print|rtl|text|transform|transition|user|writing|app|flex|'+
'grid|hyphens|content|adjust|flow|wrap|scroll|user|touch|binding|font|image|outline|orient|stack|tab|window|marquee|svg',
rCSS3 = new RegExp(sCSS3,'i');
//now we just support string
if(typeof propertyName !== 'string') {
return false;
}
//to handle the situation when propertyName like 'moz-animation'
if (propertyName.indexOf('moz') === 0) {
propertyName = '-'+propertyName;
}
propertyName = toCamelCase(propertyName);
if (getComputedStyle) {
result = getComputedStyle(div)[propertyName === 'float'? 'cssFloat' :propertyName];
if (result || result === '') return true;
//if need add prefix
if (rCSS3.test(propertyName)) {
while (i > 0) {
result = getComputedStyle(div)[rhasPrefix.test(propertyName)? propertyName : toCamelCase(prefixArray[i-1]+propertyName)];
if (result || result === '') return true;
i--;
}
}
//old IE
} else if (body.currentStyle || body.runtimeStyle) {
div.style['display'] = 'none';
//only when the element have appended to the DOM tree it can have the currentStyle property
body.appendChild(div);
currentStyle = div.currentStyle || div.runtimeStyle;
result = currentStyle[propertyName === 'float'? 'styleFloat' :propertyName];
if (result || result === '') {
body.removeChild(div);
return true;
}
if (rCSS3.test(propertyName)) {
result = currentStyle[rhasPrefix.test(propertyName)? propertyName : toCamelCase('ms-'+propertyName)];
if (result || result === '') {
body.removeChild(div);
return true;
}
}
body.removeChild(div);
}
return false;
}
alert('animation:'+isSupportCSS('animation'));
alert('webkit-animation:'+isSupportCSS('webkit-animation'));
alert('-webkit-animation:'+isSupportCSS('-webkit-animation'));
alert('webkitAnimation:'+isSupportCSS('webkitAnimation'));
alert('moz-animation:'+isSupportCSS('moz-animation'));
alert('-moz-animation:'+isSupportCSS('-moz-animation'));
alert('mozAnimation:'+isSupportCSS('mozAnimation'));
alert('ms-animation:'+isSupportCSS('ms-animation'));
alert('-ms-animation:'+isSupportCSS('-ms-animation'));
alert('msAnimation:'+isSupportCSS('msAnimation'));
</script>
</html>
