CSS的前世今生
在學(xué)習(xí)、體驗、應(yīng)用CSS3的時候，我在網(wǎng)上看到了下邊這張圖
對于新訂立的CSS3標(biāo)準(zhǔn)，各個瀏覽器的支持度不盡相同，有些都還只是在測試階段，于是乎就是出現(xiàn)了各種各樣“供應(yīng)商前綴”用以指示該CSS屬性可以被誰所支持。有時甚至對于標(biāo)準(zhǔn)CSS3屬性和“供應(yīng)商屬性”的實現(xiàn)還會不同。所以哪個寫在前，哪個寫在后就變得十分的重要。在這邊文章中，被告知：一定要將非供應(yīng)商屬性(即標(biāo)準(zhǔn)屬性)寫在最后，而且一定要寫上。
上邊的圖就是說了這樣一個關(guān)于標(biāo)準(zhǔn)屬性和供應(yīng)商屬性的故事:
The Long Long Ago：瀏覽器不支持任何的CSS屬性，所以他們的順序并不重要;
The Past:只有帶供應(yīng)商前綴的屬性被支持，所以這些順序也不重要;
The Now: 帶供應(yīng)商前綴的屬性和標(biāo)準(zhǔn)屬性都被支持，所以順序很重要，要吧標(biāo)準(zhǔn)屬性寫在最后，以便讓其在被支持時能覆蓋供應(yīng)商屬性;
The Future:只有標(biāo)準(zhǔn)屬性被支持，所以順序又將變得不重要。
而我們當(dāng)面貌似正處在悲劇的“The Now”,于是不得不注意這些小小的細節(jié)。
那到底又多少這樣的前綴呢?
比如一個背景色漸變的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 */ }
- }
不過隨著現(xiàn)在瀏覽器快速的更新升級，其實大多數(shù)情況下，我們已經(jīng)不需要寫下這些前綴以求兼容各個瀏覽器，只要寫下標(biāo)準(zhǔn)的屬性和值，就可以了。但是如果真的不得不去考慮周全，偉人也已經(jīng)為我們做了很多的事情，我們只需要站在他們的肩膀上就可以了。
css3please這個網(wǎng)站可以幫我們生成跨瀏覽器的CSS規(guī)則。而且可以當(dāng)場查看效果，非常的方面。此乃Web開發(fā)、CSS3初學(xué)體驗之必備產(chǎn)品。
最后，來展示我在我系統(tǒng)上安裝著的瀏覽器。
Windows 7 下：
Mac OS X下:
安裝那么多，一來是測試JS和CSS的兼容性問題，二來其實也是將學(xué)習(xí)工作生活所用分開來，可以把喜歡的東西放到指定的收藏夾中。不過這也看出問什么會有那么多不同的供應(yīng)商前綴了。
當(dāng)然用得最多的還是Firefox。其實現(xiàn)在的Firefox已經(jīng)可以讓我拋棄其他所有瀏覽器的沖動，只是感覺現(xiàn)在他經(jīng)常會霸占很多的內(nèi)存，讓我不得不選擇將任務(wù)交給其他瀏覽器來一起分擔(dān)。
原文：http://www.cnblogs.com/ider/archive/2011/08/23/vendor_prefix_css_history.html
【編輯推薦】
