处理CSS前缀问题的神器——AutoPrefixer

众所周知为兼容全部浏览器，有的CSS属性须要对不一样的浏览器加上前缀，然而有时添加一条属性，须要添加3~4条相似的属性只是为了知足浏览器的兼容，这不只会增长许多的工做量。

What is AutoPrefixer

Autoprefixer是一个后处理程序，你能够同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

How to use AutoPrefixer

介绍了这么多，若是用起来很麻烦，那还不如直接手写，而AutoPrefixer的另外一大特色就是使用简便，如今来讲说怎么用。

AutoPrefixer能够简单的经过下载plugin配置到Sublime，Brackets或Atom等IDE里，而在WebStorm中没法经过plugin直接安装和使用AutoPrefixer，须要经过External Tools或File Watchers来实现，详细的在WebStorm中如何安装能够参考 这篇文章。

若是单单只能经过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。

做者：Disciple_D
连接：https://www.jianshu.com/p/f5b0b92e6b0f