如何處理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 {
  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，不須要加上任何瀏覽器的私有前綴。

 

來自：http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html