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

测试浏览器是否支持某个CSS属性的更多相关文章

  1. 判断浏览器是否支持某个css属性

    方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

  2. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  3. 判断浏览器是否支持指定CSS属性和指定值

    /** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...

  4. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  5. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  6. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  7. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  8. Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...

  9. 测试浏览器是否支持JavaScript脚本

    如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证.HTML注释符号是以 <-- 开始以 --> 结束的.如果在此注释符号内编写 JavaS ...

随机推荐

  1. centos7 源码部署LNMP

    一.环境 系统环境:centos 7.4 64位 Nginx:1.7.9 MySQL: 5.7.20 (二进制包) PHP:5.6.37 二.Ngin 安装 Nginx部署 yum install   ...

  2. JMeter：生成漂亮的接口/压力测试的HTML报告

    JMeter生成HTML网页报告(非gui模式操作) 我们做性能测试的时候会经常使用一些性能测试工具,比如loardrunner和jmeter,我个人比较喜欢Jmeter这个工具,jmeter之前版本 ...

  3. 数据中心网络（1）-VXLAN

    想写个DC系列的文章,站在传统路由交换网络基础上谈谈数据中心网络,一方面是给自己的学习做下总结,另一方面也想分享一些东西. 谈到数据中心网络,能想到的东西无非就VXLAN.SDN.NFV.EVPN这些 ...

  4. cloudflare 加https、加SSL（加CF处理）实操流程

    建站过程中,少不了SSL证书等cf添加操作,cf,即cloudflare的简写 首先,点击如图“Add site”,弹出输入框后,填写已在如阿里云.goDaddy.freedom等域名平台购买的域名: ...

  5. 分分钟让你理解HTTPS

    一.HTTP存在的问题 1.1 可能被窃听 HTTP 本身不具备加密的功能,HTTP 报文使用明文方式发送 由于互联网是由联通世界各个地方的网络设施组成,所有发送和接收经过某些设备的数据都可能被截获或 ...

  6. 剑指offer：数值的整数次方

    题目描述: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 解题思路: 一开始直接用一个for循环做连乘,测了一下,发现这个指数可能是负 ...

  7. 英语学习APP

    第一部分 调研, 评测 下载并使用,描述最简单直观的个人第一次上手体验. 界面高大上,看起来很美观,是个不错的英语学习软件.我很喜欢. 2.按照<构建之法>13.1节描述的 bug 定义, ...

  8. ElasticSearch 5.6.1 安装 Kibana、X-Pack和head

    前面已经有写过ElasticSearch和iK的安装了这里就不在所了. 安装Kiabna 在下载tar包的时候需要注意下一安装的es版本号,按照官网的说明版本是对应一致的. https://www.e ...

  9. Alpha冲刺-第三天

    1.1 今日完成任务情况以及遇到的问题. 完成任务情况 杜世康:使用正则表达式对于弹幕文本中的数字,字母,符号,非法字符等过滤. 刘丹,李玉莹:实现主播管理功能 曹莹雯,尹楠: 调用NLPIR/ICT ...

  10. 【Leetcode】222. Count Complete Tree Nodes

    Question: Given a complete binary tree, count the number of nodes. Definition of a complete binary t ...