Autoprefixer：一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件而且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是须要的。

全部你须要作的就是把它添加到你的资源构建工具（例如 Grunt）而且能够彻底忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不须要浏览器前缀。像这样：

1 2 3

a{       transition :transform 1 s }

Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀：

1 2 3 4 5

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

问题

 

固然咱们能够手写浏览器前缀，可是这显得乏味以及易错。

 

咱们也可使用相似 Prefixr这样的服务以及编辑器插件，但这仍然乏于跟一堆重复的代码打交道。

 

咱们可使用象 Compass之于Sass以及 nib之于Stylus之类的预处理器提供的mixin库。它们能够解决绝大部分问题，但同时又引入了其余问题。

它们强制咱们使用新的语法。它们迭代慢于现代浏览器，因此当稳定版发布时会产生不少没必要要的前缀，有时咱们须要建立本身的mixins。

 

Compass实际上并无为你屏蔽前缀，由于你依然须要决定许多问题，例如：我须要为 border－radius 写一个mixin吗？我须要用逗号分割 +transition 的参数吗？

 

Lea Verou的 -prefix-free几乎解决了这个问题，可是使用客户端库并非个好注意，当你把最终用户性能考虑进去的话。为了防止反复作一样的事情，最好是在资源构建或者项目发布时再构建一次CSS。

 

 

揭秘

 

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计算哪些前缀是须要的，哪些是已通过期的。

 

当Autoprefixer添加前缀到你的CSS，还不会忘记修复语法差别。这种方式，CSS是基于最新W3C规范产生：

1 2 3 4 5 6 7

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

编译成：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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 CSS库），所以下面的代码：

1 2 3 4

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

编译成：

1 2 3

a {      border-radius : 5px }

由于通过Autoprefixer处理，CSS将仅包含实际的浏览器前缀。 Fotorama从Compass切换到Autoprefixer以后，CSS大小 减小了将近20%。

 

 

 

演示

 

若是你还没用过任何工具来自动化构建你的静态资源，必定要尝试下 Grunt，我强烈推荐你开始使用构建工具。这将开启你整个语法糖世界，高效的mixin库以及实用的图片处理工具。全部开发者的高效方法用来节约大量精力以及时间（自由选择语言，代码服用，使用第三方库的能力）现将都适用于前端开发人员。

 

让咱们建立一个项目目录以及在style.css中写些简单的CSS：

 

style.css

a  {  }

 

在这个例子中，咱们将使用Grunt。首先须要使用npm安装 grunt-autoprefixer ：

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

 

而后咱们须要建立 Gruntfile.js 文件以及启用Autoprefixer：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Gruntfile.js 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文件变化从新编译 build/style.css。

 

 

启用Grunt的Watch功能：

./node_modules/.bin/grunt watch

 

如今咱们添加一个CSS3表达式到style.css并保存：

style.css

1 2 3

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

接下来是见证奇迹的时刻，如今我有了build/style.css文件，Grunt监测到style.css文件发生变化并启用Autoprefixer任务。

 

Autoprefixer发现了 calc() 值单元须要Safari 6的 浏览器前缀。

build/style.css

1 2 3 4

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

咱们再添加多一点点复杂的CSS3到style.css并保存：

 

style.css

1 2 3 4

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

Autoprefixer已知Chrome，Safari 6以及Opera 15 须要为 transition及 transform  添加前缀。但IE9也须要为transform添加前缀，做为transition的值。

 

 

build/style.css

1 2 3 4 5 6 7

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

Autoprefixer为完成你全部脏活而设计。它会根据Can I Use数据库，写入全部须要的前缀而且一样理解规范之间的区别，欢迎来到将来的CSS3 – 再也不有浏览器前缀！

 

 

下一步？

 

一、Autoprefixer支持Ruby on Rails， Middleman， Mincer，Grunt，Sublime Text。了解更多关于如何在你的环境中使用的 文档。

二、若是你的环境还不支持Autoprefixer， 请报告给我。

三、关注 @autoprefixer得到更新以及新特性信息。