眾所周知為兼容所有瀏覽器，有的CSS屬性需要對不同的瀏覽器加上前綴，然而有時添加一條屬性，需要添加3~4條類似的屬性只是為了滿足瀏覽器的兼容趁矾，這不僅會增加許多的工作量，還會使得你的思路被打斷给僵。
如何解決這個問題毫捣？最近寫項目時，就發(fā)現(xiàn)了一個處理CSS前綴問題的神器——AutoPrefixer帝际。
What is AutoPrefixer
Autoprefixer是一個后處理程序蔓同，你可以同Sass，Stylus或LESS等預處理器共通使用蹲诀。它適用于普通的CSS牌柄，而你無需關心要為哪些瀏覽器加前綴，只需全新關注于實現(xiàn)侧甫，并使用W3C最新的規(guī)范。
How to use AutoPrefixer
介紹了這么多蹋宦，如果用起來很麻煩披粟，那還不如直接手寫，而AutoPrefixer的另一大特點就是使用簡便冷冗，現(xiàn)在來說說怎么用守屉。
AutoPrefixer可以簡單的通過下載plugin配置到Sublime，Brackets或Atom等IDE里蒿辙，而在WebStorm中無法通過plugin直接安裝和使用AutoPrefixer拇泛，需要通過External Tools或File Watchers來實現(xiàn)，詳細的在WebStorm中如何安裝可以參考 這篇文章思灌。
如果單單只能通過IDE才能使用這個功能俺叭，那它遠稱不上神器，真正讓其擁有神器之名的原因是：它可以很簡單泰偿、有效地同現(xiàn)有的打包工具（gulp, webpack等）一同使用熄守，來完成對項目中所有的css文件中的屬性添加前綴。
下面耗跛，我們就分別來看在這兩種打包工具下如何使用AutoPrefixer裕照。
- gulp
在gulp中，可以使用 AutoPrefixer官網(wǎng) 推薦的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
而在最近很火的webpack中使用AutoPrefixer更是輕而易舉、如虎添翼羔砾。
使用webpack可以通過簡單的配置將本文開頭提到的sass這樣的預處理器同autoprefixer這樣的后處理程序結(jié)合在一起负间。
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官網(wǎng)已將其標為【deprecated】，推薦使用上面示例中通過postcss-loader的方式使用autoprefixer唉擂。
