還在手動給css加前綴？no！幾種自動處理css前綴的方法簡介

原文首發於個人博客：還在手動給css加前綴？no！幾種自動處理css前綴的方法簡介
我們知道在寫css的時候由於要兼容不同廠商瀏覽器，一些比較新的屬性需要給它們添加廠商前綴來兼容。移動端還好，基本只要兼容webkit內核的即可，pc端就虐心了，ff、ie、Opera……可以說五花八門，應有盡有，每次要使用例如一些css3屬性的時候，就要考慮到添加前綴兼容的問題，那么多屬性那么多前綴，簡直是泯滅人性！

不過好在現在各種工具的出現，已經可以很好地解決這個問題了，下面就簡單介紹幾個吧。

1. postcss

postcss是一個用JS插件轉化樣式的工具。這些插件可以檢查CSS，支持變量和mixin，轉譯未來的CSS語法，內聯圖像等等……總之是一個非常強大的css處理工具。

在本文中我們主要介紹postcss里面使用率最高的一個插件Autoprefixer。Autoprefixer是專門用來添加廠商前綴的postcss插件，它處理兼容性的依據來源於caniuse。

使用效果

編譯前：

.example {
  display: flex;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

編譯后：

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: -webkit-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
}

如何使用？

使用構建工具gulp、webpack、grunt等

gulp

在gulp中，你可以安裝npm包gulp-postcss來啟用Autoprefixer。

var gulp = require('gulp');
gulp.task('autoprefixer', function () {
  var postcss      = require('gulp-postcss');
  var autoprefixer = require('autoprefixer');

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

webpack

在webpack中，你可以安裝npm包postcss-loader來啟用Autoprefixer。

var autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader!postcss-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

grunt

在grunt中，你可以安裝npm包grunt-postcss來啟用Autoprefixer。

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-postcss');

  grunt.initConfig({
    postcss: {
        options: {
            map: true,
            processors: [
                require('autoprefixer')({
                    browsers: ['last 2 versions']
                })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
  });

  grunt.registerTask('default', ['postcss:dist']);
};

2.在less、sass等css預處理器中處理前綴

less

在less中可以使用mixin來解決。

例如：

.animation(@args){
  -webkit-animation:@args;
  -moz-animation:@args;
  -ms-animation:@args;
  -o-animation:@args;
  animation:@args;
}

然后調用：

div{
  .animation(fadeIn  1s);
}

sass

在sass中可以使用工具庫compass來幫助我們。（安裝compass前需要先安裝Ruby，如何安裝自行百度）

然后我們在sass中引入compass模塊中需要的部分，然后通過@include命令調用，例如：

@import "compass/css3";
.rounded {  
  @include border-radius(5px);
}

編譯后結果：

.rounded {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

3.css預處理搭配構建工具使用Autoprefixer更酸爽

其實我們也看出來了，在預處理中添加前綴其實還是有點麻煩的，但是在webpack等工具中同時使用它們會更為便捷，思路其實很簡單，就是：先用預處理器把less、sass轉為css，然后再通過Autoprefixer給編譯好的css加前綴。以webpack為例：

var autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
        {
            test:   /\.less$/,
            loader: "style-loader!css-loader!postcss-loader!less-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

首先我們先用less-loader編譯less為css，然后在通過postcss-loader給編譯后的css加前綴，就是這么簡單。
參考文章：

https://github.com/postcss/autoprefixer

http://www.ruanyifeng.com/blog/2012/11/compass.html

http://blog.csdn.net/natalie86/article/details/43524285