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

既有問題

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


而如果使用 mixins,例如 Sass 的 Compass,或是 Stylusnib 等,這些工具確實可以解決很多問題,但是也產生了新的問題,就是它所使用的語法是全新的,如果要使用就必須重新學習,另外這類工具的演進速度通常都會跟不上瀏覽器的發展速度,這樣也會造成其所產生的 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