CSS的前世今生
在學習、體驗、應用CSS3的時候，我在網上看到了下邊這張圖
對于新訂立的CSS3標準，各個瀏覽器的支持度不盡相同，有些都還只是在測試階段，于是乎就是出現了各種各樣“供應商前綴”用以指示該CSS屬性可以被誰所支持。有時甚至對于標準CSS3屬性和“供應商屬性”的實現還會不同。所以哪個寫在前，哪個寫在后就變得十分的重要。在這邊文章中，被告知：一定要將非供應商屬性(即標準屬性)寫在最后，而且一定要寫上。
上邊的圖就是說了這樣一個關于標準屬性和供應商屬性的故事:
The Long Long Ago：瀏覽器不支持任何的CSS屬性，所以他們的順序并不重要;
The Past:只有帶供應商前綴的屬性被支持，所以這些順序也不重要;
The Now: 帶供應商前綴的屬性和標準屬性都被支持，所以順序很重要，要吧標準屬性寫在最后，以便讓其在被支持時能覆蓋供應商屬性;
The Future:只有標準屬性被支持，所以順序又將變得不重要。
而我們當面貌似正處在悲劇的“The Now”,于是不得不注意這些小小的細節。
那到底又多少這樣的前綴呢?
比如一個背景色漸變的CSS，為了支持FileFox，IE，Chrome，Safari，Opera，可能要寫下一下那么多的代碼：
- #background_gradient{
- background-color: #000000;
- background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF)); /* Saf4+, Chrome */
- background-image: -webkit-linear-gradient(top, #000000, #FFFFFF); /* Chrome 10+, Saf5.1+ */
- background-image: -moz-linear-gradient(top, #000000, #FFFFFF); /* FF3.6 */
- background-image: -ms-linear-gradient(top, #000000, #FFFFFF); /* FF3.6 */
- background-image: -o-linear-gradient(top, #000000, #FFFFFF); /* IE10 */
- background-image: linear-gradient(top, #000000, #FFFFFF); /* Opera 11.10+ */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#FFFFFF'); /* IE6–IE9 */ }
- }
不過隨著現在瀏覽器快速的更新升級，其實大多數情況下，我們已經不需要寫下這些前綴以求兼容各個瀏覽器，只要寫下標準的屬性和值，就可以了。但是如果真的不得不去考慮周全，偉人也已經為我們做了很多的事情，我們只需要站在他們的肩膀上就可以了。
css3please這個網站可以幫我們生成跨瀏覽器的CSS規則。而且可以當場查看效果，非常的方面。此乃Web開發、CSS3初學體驗之必備產品。
最后，來展示我在我系統上安裝著的瀏覽器。
Windows 7 下：
Mac OS X下:
安裝那么多，一來是測試JS和CSS的兼容性問題，二來其實也是將學習工作生活所用分開來，可以把喜歡的東西放到指定的收藏夾中。不過這也看出問什么會有那么多不同的供應商前綴了。
當然用得最多的還是Firefox。其實現在的Firefox已經可以讓我拋棄其他所有瀏覽器的沖動，只是感覺現在他經常會霸占很多的內存，讓我不得不選擇將任務交給其他瀏覽器來一起分擔。
原文：http://www.cnblogs.com/ider/archive/2011/08/23/vendor_prefix_css_history.html
【編輯推薦】
