Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

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

Autoprefixer，通过Can I Use数据库来确定哪些浏览器前缀是需要的，然后解析CSS文件，将前缀添加到CSS规则里。

你所要做的就是添加你的资源构建工具（比如：Grunt），然后你就可以忘记CSS前缀了，按照最新的W3C标准尽情书写无前缀的CSS，像这样：

a {
  transition: transform 1s
}

Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀。

a {
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

问题

当然，我们可以手动编写带有浏览器前缀的CSS，但是冗长并且容易出错。

我们可以使用像Prefixr的服务和文本编辑器插件，但是处理大量重复的代码依然让人心累。

我们可以使用Sass的Compass或者Stylus的nib这些预处理器提供的mixin库，他们确实解决了许多问题，但也带来了许多问题：他让我们必须使用一种新的语法；他们的更迭速度慢于现代的浏览器。所以我们使用的稳定的发行版本可能带有许多不需要的前缀，并且有时候还需要自己编写mixin库。

同时，Compass并没有为你隐藏前缀，因为你依然要解决许多问题，比如：我需要为border-radius写一个mixin库吗？我需要用逗号分隔+transition的参数吗？

Lea Verou的-prefix-free几乎解决了这个问题，但是当你把最终的用户性能考虑进去的话，使用浏览器器端的库并不是一种好的方式。为了防止一遍遍的重复这样的事情，最好的方式就是在资源构建或者项目部署的一次性构建。

揭秘

Autoprefixer是一个CSS后处理器，而不是像Sass和Stylus一样的预处理器。他没有使用新的语法，并且由于他在CSS编译后执行的，所以可以和Sass和Stylus很好的集成。

Autoprefixer基于Rework，一个用于写你自己的CSS后处理器的框架，Rework将CSS解析为有用的JavaScript结构，然后在经过你的处理后再给你输出CSS。

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

浏览器以及流行度的清单
CSS新属性、值和选择器必要的前缀清单

Autoprefixer默认支持两个最新的主要浏览器，这点类似Google，但是你可以选择你的项目所支持的浏览器，通过名称（像 “ff 21”）或者以下规则：

主流浏览器的最近两个版本使用 “last 2 versions”
全球统计超过1%的使用率使用 “> 1%”
只是最新版本使用 “ff>20” 或者 “ff>=20”

然后Autoprefixer计算出哪些前缀是必须的，哪些是过时的。

当Autoprefixer给CSS添加了前缀后，他不会忘记修正语法的差异，通过这样的方式，你的CSS符合最新的W3C标准：

a {
  background: linear-gradient(to top, black, white);
  display: flex
}
::placeholder {
  color: #ccc
}

编译后：

a {
  background: -webkit-linear-gradient(bottom, black, white);
  background: linear-gradient(to top, black, white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}
:-ms-input-placeholder {
  color: #ccc
}
::-moz-placeholder {
  color: #ccc
}
::-webkit-input-placeholder {
  color: #ccc
}
::placeholder {
  color: #ccc
}

同时，Autoprefixer也会情理过时的前缀（从遗留代码或者像Bootstrap库），比如：

a {
  -webkit-border-radius: 5px;
  border-radius: 5px
}

编译为：

a {
  border-radius: 5px
}

所以，Autoprefixer处理后，CSS只会包含实际存在的浏览器前缀，Fotorama从Compass切换为Autoprefixe之后，CSS文件大小减小了将近20%。

Demo

如果你还没有使用过任何自动化的资源构建工具，强烈推荐Grunt。他给你打开一片心的世界，美妙的语法糖、高效的mixin库以及实用的图像处理工具。让开发者效率大大提高，节省了大量时间和精力（自由选择语言、代码复用、使用第三方库能力），这些现在都唾手可得。

下面让我们创建一个项目目录并且创建一个名为style.css的CSS文件。

a { }

在这个例子里，我们使用Grunt，首先我们需要使用npm安装grunt-autoprefixer。

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

然后我们需要创建Gruntfile.js并且开启Autoprefixer。

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    ‘build/style.css‘: ‘style.css‘
                }
            }
        },
        watch: {
            styles: {
                files: [‘style.css‘],
                tasks: [‘autoprefixer‘]
            }
        }
    });
    grunt.loadNpmTasks(‘grunt-autoprefixer‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
};

这个配置文件，使用Autoprefixer将style.css编译到build/style.css，同时我们使用grunt-contrib-watch监控style.css文件的改变来重新编译。

让我们开启Grunt的Watch操作

./node_modules/.bin/grunt watch

现在，我们加入CSS3的语法，保存。

a {
  width: calc(50% - 2em)
}

见证奇迹的时刻到了。我们得到build/style.css，Grunt检测到style.css的变化然后启动Autoprefixer任务，Autoprefixer发现了calc()值，需要带上Safari6的浏览器前缀。

a {
  width: -webkit-calc(50% - 2em);
  width: calc(50% - 2em)
}

现在我们向style.css添加一些更加复杂的CSS3语法。

a {
  width: calc(50% - 2em);
  transition: transform 1s
}

Autoprefixer已经知道Chrome，Safari6和Opera 15 需要为transition和transform添加浏览器前缀，但IE 9需要为transform添加前缀，作为transition的值。

a {
  width: -webkit-calc(1% + 1em);
  width: calc(1% + 1em);
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
 }

Autoprefixer为你解决那些脏累的活，他会检查Can I Use数据库，添加所需要的浏览器前缀，并且他懂得规范之间的区别。欢迎来到CSS3的未来——再也没有前缀！

接下来呢？

Autoprefixer支持Ruby on Rails，Middleman，Mincer，Grunt，Sublime Text。从这份文档中学习如何在你的环境中使用Autoprefixer。
如果你的环境不支持Autoprefixer，提交给我我会尝试提供帮助。
关注@autoprefixer，获取最新特性和更新信息。