眾所周知為兼容所有瀏覽器，有的CSS屬性需要對不同的瀏覽器加上前綴，然而有時添加一條屬性，需要添加3~4條類似的屬性只是為了滿足瀏覽器的兼容，這不僅會增加許多的工作量。

What is AutoPrefixer

Autoprefixer是一個後處理程序，你可以同Sass，Stylus或LESS等預處理器共通使用。它適用於普通的CSS，而你無需關心要為哪些瀏覽器加前綴，只需全新關註於實現，並使用W3C最新的規範。

How to use AutoPrefixer

介紹了這麽多，如果用起來很麻煩，那還不如直接手寫，而AutoPrefixer的另一大特點就是使用簡便，現在來說說怎麽用。

AutoPrefixer

如果單單只能通過IDE才能使用這個功能，那它遠稱不上神器，真正讓其擁有神器之名的原因是：它可以很簡單、有效地同現有的打包工具（gulp, webpack等）一同使用，來完成對項目中所有的css文件中的屬性添加前綴。

下面，我們就分別來看在這兩種打包工具下如何使用AutoPrefixer。

• gulp
  
  在gulp中，可以使用 AutoPrefixer官網 推薦的postcss + autoprefixer兩個插件的組合，也可以通過gulp-autoprefixer這一個插件。

// Method 1: postcss + autoprefixer
gulp.task(‘autoprefixer‘, function () { 
    var postcss = require(‘gulp-postcss‘);
    var sourcemaps = require(‘gulp-sourcemaps‘);
    var autoprefixer = require(‘autoprefixer‘);

    return gulp.src(‘./src/*.css‘)
      .pipe(sourcemaps.init())
      .pipe(postcss([ autoprefixer({ browsers: [‘last 2 versions‘] }) ]))
      .pipe(sourcemaps.write(‘.‘))
      .pipe(gulp.dest(‘./dest‘));
});
// Method 2: gulp-autoprefixer
gulp.task(‘autoprefixer‘, function () { 
    var autoprefixer = require(‘gulp-autoprefixer‘);

    return gulp.src(‘./src/*.css‘)
      .pipe([ autoprefixer({ browsers: [‘last 2 versions‘] }) ])
      .pipe(gulp.dest(‘./dest‘));
});
 

• webpack（webpack1 的寫法）
  而在最近很火的webpack中使用AutoPrefixer更是輕而易舉、如虎添翼。
  使用webpack可以通過簡單的配置將本文開頭提到的sass這樣的預處理器同autoprefixer這樣的後處理程序結合在一起。

var autoprefixer = require(‘autoprefixer‘);
module.exports = {
    module: {
      loaders: [
        { test: /\.css$/, loader: "style!css!postcss" },
        { test: /\.scss$/, loader: "style!css!postcss!sass" }
      ]
    },
    postcss: [ autoprefixer({ browsers: [‘last 2 versions‘] })
]}

註： 另外webpack還有一個autoprefixer-loader，但npm官網已將其標為【deprecated】，推薦使用上面示例中通過postcss-loader的方式使用autoprefixer。

處理CSS前綴問題的神器——AutoPrefixer