我們知道在寫css的時候由於要相容不同廠商瀏覽器，一些比較新的屬性需要給它們新增廠商字首來相容。移動端還好，基本只要相容webkit核心的即可，pc端就虐心了，ff、ie、Opera……可以說五花八門，應有盡有，每次要使用例如一些css3屬性的時候，就要考慮到新增字首相容的問題，那麼多屬性那麼多字首，簡直是泯滅人性！

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

1. postcss

postcss是一個用JS外掛轉化樣式的工具。這些外掛可以檢查CSS，支援變數和mixin，轉譯未來的CSS語法，內聯影象等等……總之是一個非常強大的css處理工具。

在本文中我們主要介紹postcss裡面使用率最高的一個外掛

使用效果

編譯前：

.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);
}
 

2. 使用構建工具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']);
};

3.在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;
}

4.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加字首，就是這麼簡單。
參考文章：