一个处理CSS浏览器兼容性的神器网站：AutoPrefixer

文章目录[隐藏]

网站简介
使用说明
相关链接

autoprefixer 是一款能够在线补齐 CSS3 浏览器兼容性标签的网站，使用这款在线工具可以免去考虑浏览器标签前缀的问题。

写过 CSS 的都知道，不要同内核浏览器有不同的前缀标签，有时候我们可能忘记那些需要加标签，有时候会加多了，这时候我们需要一款只能添加，去除标签的工具，今天介绍的 autoprefixer 就是这款工具。

网站简介

Autoprefixer 是一个后处理程序，不象 Sass 以及 Stylus 之类的预处理器。它适用于普通的 CSS 而不使用特定的语法。可以轻松跟 Sass 以及 Stylus 集成，由于它在 CSS 编译后运行。

Autoprefixer 基于Rework，一个可以用来编写你自己的 CSS 后处理程序的框架。Rework 解析 CSS 成有用 Javascript 结构经过你的处理后导回给 CSS。

Autoprefixer 的每个版本都包含一份最新的 Can I Use 数据：

当前浏览器列表以及它们的普及度。
新 CSS 属性，值和选择器前缀列表。

Autoprefixer 默认将支持主流浏览器最近 2 个版本，这点类似 Google。不过你可以在自己的项目中通过名称或者模式进行选择：

主流浏览器最近 2 个版本用“last 2 versions”；
全球统计有超过 1%的使用率使用“>1%”;
仅新版本用“ff>20”或”ff>=20″.

然后 Autoprefixer 计算哪些前缀是需要的，哪些是已经过期的。

使用说明

这就是网站的预览效果，使用的时候，将代码放进左边框内，会在右侧自动生成修改过的代码

下面距离看看吧：

.id{
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

经过处理，会自动修改为下面的代码：

.id{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

看懂了吧，是不是很不错的东西。