衆所周知爲兼容全部瀏覽器,有的CSS屬性須要對不一樣的瀏覽器加上前綴,然而有時添加一條屬性,須要添加3~4條相似的屬性只是爲了知足瀏覽器的兼容,這不只會增長許多的工做量。javascript
Autoprefixer是一個後處理程序,你能夠同Sass,Stylus或LESS等預處理器共通使用。它適用於普通的CSS,而你無需關心要爲哪些瀏覽器加前綴,只需全新關注於實現,並使用W3C最新的規範。css
介紹了這麼多,若是用起來很麻煩,那還不如直接手寫,而AutoPrefixer的另外一大特色就是使用簡便,如今來講說怎麼用。java
AutoPrefixer能夠簡單的經過下載plugin配置到Sublime
,Brackets
或Atom
等IDE裏,而在WebStorm
中沒法經過plugin直接安裝和使用AutoPrefixer,須要經過External Tools或File Watchers來實現,詳細的在WebStorm
中如何安裝能夠參考 這篇文章。webpack
若是單單隻能經過IDE才能使用這個功能,那它遠稱不上神器,真正讓其擁有神器之名的緣由是:它能夠很簡單、有效地同現有的打包工具(gulp
, webpack
等)一同使用,來完成對項目中全部的css
文件中的屬性添加前綴。git
下面,咱們就分別來看在這兩種打包工具下如何使用AutoPrefixer。github
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
中使用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
。web