Autoprefixer：一個以最好的方式處理瀏覽器前綴的后處理程序
原文出處： css-tricks 譯文出處：三桂
Autoprefixer解析CSS文件并且添加瀏覽器前綴到CSS規則里，使用Can I Use的數據來決定哪些前綴是需要的。
所有你需要做的就是把它添加到你的資源構建工具（例如 Grunt）并且可以完全忘記有CSS前綴這東西。盡管按照最新的W3C規范來正常書寫你的CSS而不需要瀏覽器前綴。像這樣：
a{
transition :transform 1s
} Autoprefixer使用一個數據庫根據當前瀏覽器的普及度以及屬性支持提供給你前綴：
a{
-webkit-transition :-webkit-transform 1s;
transition :-ms-transform 1s;
transition :transform 1s
} 問題
當然我們可以手寫瀏覽器前綴，但是這顯得乏味以及易錯。
我們也可以使用類似Prefixr這樣的服務以及編輯器插件，但這仍然乏于跟一堆重復的代碼打交道。
它們強制我們使用新的語法。它們迭代慢于現代瀏覽器，所以當穩定版發布時會產生很多不必要的前綴，有時我們需要創建自己的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規范產生：
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 CSS庫），因此下面的代碼：
a {
-webkit-border-radius : 5px;
border-radius : 5px
}編譯成：
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：
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
a {
width : calc(50% - 2em)
}接下來是見證奇跡的時刻，現在我有了build/style.css文件，Grunt監測到style.css文件發生變化并啟用Autoprefixer任務。
Autoprefixer發現了calc()值單元需要Safari 6的瀏覽器前綴。
build/style.css
a {
width : -webkit-calc(50% - 2em);
width : calc(50% - 2em)
}我們再添加多一點點復雜的CSS3到style.css并保存：
style.css
a {
width : calc(50% - 2em);
transition : transform 1s
}Autoprefixer已知Chrome，Safari 6以及Opera 15需要為transition及transform添加前綴。但IE9也需要為transform添加前綴，作為transition的值。
build/style.css
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 – 不再有瀏覽器前綴！
下一步？
2、如果你的環境還不支持Autoprefixer，請報告給我。
3、關注@autoprefixer獲得更新以及新特性信息。
本文由用戶 3y8nn 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！