Autoprefixer：最佳的 CSS 供應商前綴（Vender Prefixes）後處理器

Autoprefixer 是一個 CSS 供應商前綴（Vender Prefixes）的後處理器，這裡告訴你這個工具如何使用以及它的優點在哪裡。

既有問題

在之前的文章中我們介紹過好幾種處理 CSS 供應商前綴的問題，但是各種工具都有其優缺點，像 Prefixr 這類的工具在處理比較大量的程式碼時，老是要將程式碼複製與貼上，就會很累。

而如果使用 mixins，例如 Sass 的 Compass，或是 Stylus 的 nib 等，這些工具確實可以解決很多問題，但是也產生了新的問題，就是它所使用的語法是全新的，如果要使用就必須重新學習，另外這類工具的演進速度通常都會跟不上瀏覽器的發展速度，這樣也會造成其所產生的 CSS 有過時的問題，有時候為了解決一些問題，還需要自己撰寫 mixins。

另外 Compass 並沒有完全將 CSS 供應商前綴的問題都處理乾淨，你還是會需要自己決定一些問題，例如是否要自己撰寫處理 border-radius 的 mixin？或是 +transition 的參數是否要用逗號分隔？

-prefix-free 這個工具基本上可以解決大部分的問題，但是以 JavaScript 來處理 CSS 供應商前綴也會增加瀏覽器的負擔，對於效能也會有所影響。為了避免這類重複的動作，最好是在開發階段就一次就把 CSS 供應商前綴處理完。

使用 Autoprefixer

Autoprefixer 會分析 CSS 程式碼並根據 Can I Use 所提供的資料來決定該加上哪一些供應商前綴，而你所需要作的事情就是把他加入自己的自動化開發工具中（例如 Grunt 等），然後就可以直接使用 W3C 的標準來撰寫 CSS，不需要加上任何供應商前綴：

a {
  transition: transform 1s
}

Autoprefixer 會依據資料庫來自動加上需要的 CSS 供應商前綴：

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

以往的 Sass 或 Stylus 這類的工具是屬於前處理器（preprocessor），而 Autoprefixer 則是一種後處理器（postprocessor），它是直接針對 CSS 本身來進行處理，不需要任何額外的標示語法，因為他是在 CSS 程式碼產生之後才進行後續的處理，所以可以很容易與 Sass 或 Stylus 這類的工具整合，不會產生衝突。

Autoprefixer 是以 Rework 這個架構所發展的 CSS 後處理器，他是將 CSS 的程式碼解析後轉成 JavaScript 的資料結構，進行處理後再產生新的 CSS 程式碼。

如果你沒使用任何自動化頁開發工具，則建議可以使用 Grunt，它可以幫你自動處理一些重複性的工作。這裡我們介紹如何在 Grunt 的專案中使用 Autoprefixer。

在使用前要先安裝 grunt-autoprefixer 這個套件：

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

假設我們自己撰寫的 CSS 檔為 style.css，內容為：

a { }

接著要編輯 Grunt 的設定檔 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');
};

這個設定可以讓 Grunt 自動使用 Autoprefixer 將 style.css 編譯為 build/style.css，並且使用 grunt-contrib-watch 隨時監控 style.css 這個檔案，只要這個檔案一有變動，就重新編譯並產生新的 build/style.css。

在使用前記得要啟動 Grunt 的 Watch：

./node_modules/.bin/grunt watch

現在我們修改 style.css 的內容，加上一條 CSS 屬性：

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

存檔之後，Grunt 就會偵測出 style.css 有變動，接著就會自動產生新的 build/style.css：

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

在這裡所有的 CSS 供應商前綴都會由 Grunt 與 Autoprefixer 自動處理，所以使用者可以完全不需要管它，非常方便。

另外對於一些過時的 CSS 供應商前綴，Autoprefixer 也會自動清除，例如：

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

編譯出來就會變成：

a {
  border-radius: 5px
}

參考資料：CSS-Tricks