您的位置：首页 > Web前端 > CSS

测试浏览器是否支持某个CSS属性

2014-03-18 15:59 49 查看

花了几个小时写了个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航