如何處理CSS3屬性前綴

大漠在如何處理CSS3屬性前綴中詳細介紹了不少方法，收來看看。

---

今天閒來無聊，從新來講說CSS3前綴的問題。在春節前和@一絲姐姐提及Sass中有關於gradient的mixins。姐姐說：

爲何還要用mixin呢？爲何不使用Autoprefixer？使用Autoprefixer，只須要輸入一行代碼，編譯器幫你作了一切，還糾結個毛mixin。

姐姐的一句話讓我汗顏，我還在思考着如何讓Sass來寫Gradient，或者相似這樣須要帶前綴的CSS3屬性。也這樣讓我在思考，那麼有了Autoprefixer這樣的後處理，Sass中有關於CSS3的mixins是否是已失去了他存在的意義。帶着這樣的爲何？咱們一塊兒來開啓今天有關於CSS3前綴的探討。

CSS3的屬性爲何要帶前綴

使用過CSS3屬性的同窗都知道，CSS3屬性都須要帶各瀏覽器的前綴，甚至到如今，依然還有不少屬性須要帶前綴。這是爲何呢？

個人理解是，瀏覽器廠商之前就一直在實施CSS3，但它還未成爲真正的標準。爲此，當一些CSS3樣式語法還存在波動時，它們提供針對流星器的前綴。如今主要流行的瀏覽器內核主要有：

• Trident內核：主要表明爲IE瀏覽器
• Gecko內核：主要表明爲Firefox
• Presto內核：主要表明爲Opera
• Webkit內核：產要表明爲Chrome和Safari

而這些不一樣內核的瀏覽器，CSS3屬性（部分須要添加前綴的屬性）對應須要添加不一樣的前綴，也將其稱之爲瀏覽器的私有前綴，添加上私有前綴以後的CSS3屬性能夠說是對應瀏覽器的私有屬性：

• Trident內核：前綴爲-ms
• Gecko內核：前綴爲-moz
• Presto內核：前綴爲-o
• Webkit內核：前綴爲-webkit

來看一個簡單的示例，早期寫一個圓角border-radius，須要這樣寫：

.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

這樣編寫代碼，無形之中給前端人員增長了很多工做量，因而開始有人在討論這個問題「如何在編寫CSS時不須要添加瀏覽器的私有前綴，又能讓瀏覽器識別？」

-prefix-free

爲了解決手工書寫前綴的問題，最先的一個解決方案是由Lea Verou提供的一個-prefix-free腳本。你只須要在你的.html文件中插入一個prefixfree.js文件（能夠是文檔任何地方），建議把這個腳本文件放在樣式表以後。

添加這個腳本以後，使用CSS3的屬性時，只需書寫標準樣式便可。可是這種作法將全部壓力交給了客戶端來處理。如此一來頁面解析壓力就大了，性能會打必定的折扣，而且一旦腳本加載失敗，那麼就會出現瀏覽器沒法正常渲染CSS3的樣式風格。

prefixfree腳本僅在IE9+、Opera10+、Firefox3.5+、Safari4+獲得支持。

編輯器插件

除了prefixfree腳本以外，不少同窗依賴於文本編輯器的插件來處理。這裏來看看Sublime Text編輯器裏是如何實現Autoprefixer功能的。

要在編輯器中安裝Autoprefixer插件，首先須要你的環境中已經安裝好了Node.js。你能夠在命令終端執行：

node -v

來檢測是否已安裝，若是沒有安裝，請先安裝。在這裏假設你已具有Node.js環境。

如今開啓你的Sublime Text編輯器，你能夠同時按下command + Shift + p三個鍵，選擇"Install Package"。而後搜索Autoprefixer。

如今你在你的Sublime Text中使用Autoprefixer功能。假設你在樣式文件中輸入：

.box {
  transform: rotate(45deg);
  border-radius: 5px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  transition: all .2s ease .1s;
}

這個時候你只須要同時按下Command + Shift + P三個鍵，選擇「Autoprefix CSS」，而且回車，就能獲得下面這樣的代碼：

.box {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 5px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  transition: all .2s ease .1s;
}

以下圖所示：

注：不一樣的配置，執行的效果不同。詳細能夠點擊這裏查閱。

預處理器中的混合宏

隨着CSS預處理器愈來愈普及，部分同窗開始採用預處理器中的混合宏來處理CSS3前綴的事項。好比說Compass，裏面就是使用Sass的mixin爲CSS3須要帶前綴的屬性定製了一些mixin。還有相似於Stylus中的nib等。預處理器中的混合宏確實能夠解決不少問題，但也產生了新的問題，就是它所使用的語法是全新的，若是要使用就必須從新學習，另外這類工具的演進速度一般都會跟不上瀏覽器的發展速度，這樣也會形成其產生的CSS有過期的問題，有時候爲了解決一些問題，還須要本身去寫mixins。好比：

正如前面所說的，若是要跟上瀏覽器的演進，就須要不斷的更新你的CSS3 mixins,否則就會形成你的代碼不是最新的。其中Compass就存在這樣的問題：

@import "compass";

.box {
  @include border-radius(5px);
}

編譯出來的CSS：

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

而現實卻不盡人意，由於到寫這篇文章爲止，咱們寫圓角屬性只須要：

.box {
  border-radius: 5px;
}

各主流瀏覽器就能正常的解析。形成這個緣由的時，Compass中的CSS3的mixin沒有跟上步子去更新定義好的mixins。

使用Autoprefixer

使用Sass、LESS、Stylus或者其餘相似的工具都是屬於CSS的前處理器（Preprocessor），而Autoprefixer則是一種後處理器（Postprocessor）。它是直接針對CSS自己來進行處理，不須要任何額外的語法。由於它是在CSS代碼產生以後才進行後續處理。

Autoprefixer是以Rework這種架構所發展的CSS後處理器，他是將CSS代碼解析後轉成JavaScript的資料結構，進行處理後再產生新的CSS代碼。

Autoprefixer會分析CSS代碼，而且根據Can I Use所提供的資料來決定要加上哪些瀏覽器前綴，而你要作的事情就是把他加入本身的自動化開發工具中（好比Grunt或者Gulp），而後就能夠直接使用W3C的標準來寫CSS，不須要加上任何瀏覽器的私有前綴。

接下來看看如何使用自動化工具實現Autoprefixer功能。

Grunt中配置Autoprefixer

假設你的環境中已具有了Grunt的運行環境，若是沒有請先移步Grunt官網瞭解，這裏不作過多闡述。

在Github中有一個grunt-autoprefixer的插件，按照其官方提示，我在命令行中執行了下面的語句：

npm install grunt-autoprefixer --save-dev

命令終端提示：

彷佛沒有成功（其實我也不太懂Grunt，只是臨陣磨槍）。因而我改投@一絲姐姐說的postcss。在命令終端從新輸入：

npm install grunt-postcss --save-dev

這下彷佛有戲了：

不過我還跟着官網所說的執行了另一個命令：

grunt-postcss autoprefixer-core csswring

運行命令後能夠看到下圖的提示信息：

![postcss autoprefixer].png](/img/bVkYDN)

接下來須要在你項目的根目錄中配置Gruntfile.js文件：

'use strict';
module.exports = function(grunt) {

  // Dynamically loads all required grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  var autoprefixer = require('autoprefixer-core');

  // Configures the tasks that can be run
  grunt.initConfig({
    postcss: {
        options: {
            processors: [
              autoprefixer({ browsers: ['last 2 version'] }).postcss
            ]
        },
        // dist: {
        //  src: 'src/css/*.css',
        //  dest:'dest/css/*.css'
        // }
        multiple_files: {
          expand: true,
          flatten: true,
          src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
          dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
        },
    },
  });

  grunt.loadNpmTasks('grunt-postcss');

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

};

爲了驗證這樣作是否正確，我在項目中的src/css/中建立了一個main.css文件，而後輸入代碼：

a {
  transition: all .2s ease .1s;
  transform: rotate(45deg) translateY(200px);
}

在命令終端執行：

grunt

終端將運行：

Running "postcss:multiple_files" (postcss) task
File dest/css/main.css created.

Done, without errors.

查看項目中自動建立了一個dest/css/main.css文件，而裏面的代碼：

a {
  transition: all .2s ease .1s;
  -webkit-transform: rotate(45deg) translateY(200px);
          transform: rotate(45deg) translateY(200px);
}

正是我須要的樣式代碼。這樣嘗試一回，以爲比使用Sass中的mixin爽多了。

Gulp中配置Autoprefixer

除了Grunt能夠配置Autoprefixer以外，還可使用Gulp來配置。這裏也假設你的項目中已具有了Gulp的運行環境，若是沒有，能夠查閱Gulp官網相關資料。

根據gulp-autoprefixer官網提示，我在命令終端輸入了：

npm install gulp-autoprefixer --save-dev

在終端中能夠看到這樣的提示信息：

在Grunt中須要在Gruntfile.js進行配置，而在Gulp中也有點相似，須要在gulpfile.js中進行配置：

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var autoprefix = require('gulp-autoprefixer');

// JS hint task
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./build/styles'));
});

看上去要比Gruntfile.js配置簡單一些。爲了驗證操做是否正確，我在項目中建立了src/styles/style.css,而且在style.css文件中輸入了：

a {
  transform: translateY(20px) rotate(45deg);
}

接下來在命令終端執行：

gulp styles

看到以下提示信息：

[12:53:26] Using gulpfile ~/Sites/test/gulp-autoprefixer/gulpfile.js
[12:53:26] Starting 'styles'...
[12:53:26] Finished 'styles' after 7.26 ms

此時，在項目中會自動建立一個build/styles/style.css文件，打開這個文件查看代碼：

a {
  -webkit-transform: translateY(20px) rotate(45deg);
      -ms-transform: translateY(20px) rotate(45deg);
          transform: translateY(20px) rotate(45deg);
}

正是咱們須要的。

其實在PostCSS也提供了有關於如何在Gulp中配置Autoprefixer的說明。感興趣的同窗能夠看看。

有了Autoprefixer這樣的工具對於處理CSS3屬性前綴來講就再也不是頭痛的事情了。固然，若是你正在使用CSS預處理器編寫代碼，那麼也能夠很完美的結合Autoprefixer去處理。

總結

通過幾年的技術演進，CSS3屬性前綴的問題已再也不是一個問題。現在天你徹底能夠忽略我要不要加前綴，要加哪些前綴，而只須要專心去碼你的代碼。把這些煩人的事情交給Autoprefixer去處理。固然，越到後面，或許咱們都不須要使用任何前綴。