[译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器
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，获取最新特性和更新信息。
