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
}
演示
如果你還沒用過任何工具來
自動化
構建你的靜態資源，一定要嘗試下
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獲得更新以及新特性信息。