原文地址
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。