zoukankan      html  css  js  c++  java
  • 测试浏览器是否支持某个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>
    
  • 相关阅读:
    vue---mixins的用法
    vue---slot,slot-scoped,以及2.6版本之后插槽的用法
    Java实现DDD中UnitOfWork
    redis基础及redis特殊场景使用描述
    网易一千零一夜 读后初感
    产品经理与众不同的思维方式与“职业病”——《人人都是产品经理》
    【Ubuntu14】Nginx+PHP5+Mysql记录
    A标签/按钮防止重复提交&页面Loading制作
    PHPCMS v9 二次开发_验证码结合Session开发
    eclipse 编码设置【转】
  • 原文地址:https://www.cnblogs.com/suprise/p/3607967.html
Copyright © 2011-2022 走看看