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

衆所周知爲兼容全部瀏覽器,有的CSS屬性須要對不一樣的瀏覽器加上前綴,然而有時添加一條屬性,須要添加3~4條相似的屬性只是爲了知足瀏覽器的兼容,這不只會增長許多的工做量。javascript

What is AutoPrefixer

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

How to use AutoPrefixer

介紹了這麼多,若是用起來很麻煩,那還不如直接手寫,而AutoPrefixer的另外一大特色就是使用簡便,如今來講說怎麼用。java

AutoPrefixer能夠簡單的經過下載plugin配置到SublimeBracketsAtom等IDE裏,而在WebStorm中沒法經過plugin直接安裝和使用AutoPrefixer,須要經過External Tools或File Watchers來實現,詳細的在WebStorm中如何安裝能夠參考 這篇文章webpack

若是單單隻能經過IDE才能使用這個功能,那它遠稱不上神器,真正讓其擁有神器之名的緣由是:它能夠很簡單、有效地同現有的打包工具(gulp, webpack等)一同使用,來完成對項目中全部的css文件中的屬性添加前綴。git

下面,咱們就分別來看在這兩種打包工具下如何使用AutoPrefixergithub

  • 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的方式使用autoprefixerweb



做者:Disciple_D
連接:https://www.jianshu.com/p/f5b0b92e6b0f
相關文章
相關標籤/搜索