Autoprefixer解析CSS檔案並且新增瀏覽器字首到CSS規則裡，使用Can I Use的資料來決定哪些字首是需要的。
所有你需要做的就是把它新增到你的資源構建工具（例如 Grunt）並且可以完全忘記有CSS字首這東西。儘管按照最新的W3C規範來正常書寫你的CSS而不需要瀏覽器字首。像這樣：
|
1 2 3 |
a{ transition :transform 1s } |
Autoprefixer使用一個資料庫根據當前瀏覽器的普及度以及屬性支援提供給你字首：
|
1 2 3 4 5 |
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規範產生：
|
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 1s } |
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 1s; transition : -ms-transform 1s; transition : transform 1s } |
Autoprefixer為完成你所有髒活而設計。它會根據Can I Use資料庫，寫入所有需要的字首並且同樣理解規範之間的區別，歡迎來到未來的CSS3 – 不再有瀏覽器字首！
下一步？
2、如果你的環境還不支援Autoprefixer，請報告給我。
3、關注@autoprefixer獲得更新以及新特性資訊。