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

浏览数：50 / 时间：2015年06月09日

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