css3属性前缀那些事与如何判断当前浏览器支持的css3属性前缀 从零开始造轮子，封装自己的运动库（三）

学习过css3的同学都应该有所了解，在不同种类与不同版本的浏览器对css3的支持各不一样，因此各个浏览器都有不同的css3前缀。

这里我们以transform为例，了解一下各个前缀

webkit内核的浏览器，比如chrome，safari的css3前缀为

-webkit-transform

Gecko内核的浏览器，如firefox支持的css3前缀为

-moz-transform

Trident内核的浏览器，如IE 支持的css3前缀为

-ms-transform

Presto内核浏览器，如Opera 支持的css3前缀为

-o-transform

于是，为了能够支持所有的浏览器，我们在实际开发中css样式就不得不这样写

-webkit-transform: translateX(50px);
   -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
     -o-transform: translateX(50px);
        transform: translateX(50px);

我们在开发中往往会遇到大量的css3属性，如果每一个都这样写的话，势必会降低开发效率。因此为了解决这个问题，我们就不得不去掌握关于前端构建工具的一些知识。当然这篇文章的重点不在此，可能需要大家自己找其他文章了解，目前比较热门的前端构建工具有webpack与gulp。都有专门处理这个问题的插件。当然，我们还得学习一些css预处理器，sass,less等。建议学习sass。

这篇文章的重点主要在于js的处理上，css上的这些麻烦，自然js在设置和获取元素css3属性的时候也会遇到。因此判断当前浏览器支持哪一种前缀就变得十分重要。

在此之前我们需要了解一下每一种带前缀的css3属性所对应的js特性值。比如margin-top的js特性值为marginTop。

-webkit-transform --> WebkitTransform
-moz-transform --> MozTransform
-ms-transform --> msTransform
-o-transform --> OTransform

可能细心的朋友已经发现，-ms-前缀对应的js特性值，并不会和其他前缀一样，首字母会变成大写。这一点在后面的换算中我们需要特别注意，它会给我们带来不小的麻烦。

那么，我们如何知道当前浏览器到底是支持哪一个前缀呢？

解决问题的关键在于下面的代码

var divstyle = document.createElement('div').style;

在chrome控制台打印出这段代码，我们发现，divstyle的值为一个CSSStyleDeclaration，他是一个元素所有css属性集合组成的对象，浏览器支持的所有css属性都包括在内，因此我们只需要在其中找到一个对应的前缀，那么我们就能够判断当前浏览器对应的对象了。知道原理，实现起来就简单很多了。

我们需要一个工具方法，能够将-webkit-transform这种横杠格式的字符串转换为js特性值，就是驼峰格式的字符串 WebkitTransform，但是我们需要考虑到-ms-前缀的不同，我们需要对这种情况做一个特殊处理，因此方法如下

function camelCase(str) {
    return (str + '').replace(/^-ms-/, 'ms-').replace(/-([a-z]|[0-9])/ig, function(all, letter) {
        return (letter + '').toUpperCase();
    })
}

于此同时，还需要一个逆向转换的工具方法

function uncamelCase(str) {
    return str.replace(/([A-Z]|^ms)/g, "-$1").toLowerCase();
}

这个时候，我们就可以很自由的封装一些方法来获取当前浏览器支持的css3前缀了


// 该方法的返回值就是当前浏览器支持的css3前缀，比如在chrome中运行，就会返回 -webkit-
function cssVender() {
    var ds = divstyle,
        cases = ['-webkit-', '-moz-', '-ms-', '-o-', ''],
        i = 0;
    do {
        if (camelCase(cases[i] + 'transform') in ds) {
            return cases[i];
        }
    } while (++i < cases.length);
    return '';
}

我们还希望扩展两个方法，比如传入transfrom，我们能够得到当前浏览器支持的css带前缀属性，得到 -webkit-transform，如果在比较先进的浏览器，就直接返回transform

function fixCSS(property) {
    var ds = divstyle,
        pre = cssVender();
    return (camelCase(property) in ds) && property || (camelCase(pre + property) in ds) && pre + property || property;
}

另外一个方法，就是传入一个属性，返回当前浏览器支持的js特性值，如传入transform，得到WebkitTransform，如果在比较先进的浏览器，直接返回transform

function isCSS(property) {
    var name = camelCase(fixCSS(property));
    return (name in divstyle) && name || '';
}

好啦，关于css3前缀的几个功能强大的实用的工具方法就此搞定，这些方法可以帮助我们处理很多css3前缀带来的困扰。

done.