還在手動給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