《HTML5與CSS3實戰指南》——1.5我們為什麼應關注CSS3

本節書摘來自非同步社群《HTML5與CSS3實戰指南》一書中的第1章，第1.5節,作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

1.5 我們為什麼應關注CSS3

在這本書的後面，我們將詳細介紹CSS3的新功能。同時，我們將告訴您為什麼CSS3的新技巧能夠令網路開發人員興奮。

一些設計技巧幾乎在每一個專案中都會得到應用。投影、漸變和圓角是3個非常好的示例。它們應用在每一個地方。只要應用恰當，並與網站的整體主題和目的一致，這些技術的改進會為整個設計增添光彩。

可能您在想：我們使用CSS建立這些設計元素已經很多年了。我們還有必要學這些嗎？

過去，為了建立漸變、投影及圓角，網路設計人員必須求助於許多棘手的技巧。有時，還需要一些其他的HTML元素。在某些情況下，HTML保持的相當整潔，但此時需要一些指令碼使用技巧。以漸變為例，使用其他圖示是不可避免的。我們忍受這種解決方法，是因為我們沒有其他方法完成這些設計。

CSS3允許我們以這種思想超前的方式使用這些和其他的設計元素，從而使我們在諸多方面受益：使標記整潔；從而便於使用人員及計算機進行訪問；維護程式碼；減少不必要的圖示以及更快載入網頁。

供應商字首註釋

為了使用CSS3的一些新功能，需要包含幾行特殊的程式碼。這是因為瀏覽器供應商在新增執行CSS3的一些新功能時，使用了自己的字首版本屬性。例如，在FireFox中轉換元素時，需要使用-moz-transform屬性；同樣，在基於WebKit的瀏覽器中，比如，Safari和Google Chrome，您必須使用-webkit-transform屬性。在有些情況中，為使用一個CSS屬性，您可能必須新增4行程式碼。這可能似乎會喪失一些從避免黑客、影像及非語義標記所獲得的益處。

但是，瀏覽器供應商以這種方式執行這些新功能，理由如下：現在的規範還不是最終版本，在程式執行中，還有一些漏洞。因此，現在您在執行這些功能時，使用供應商字首來提供數值，並且使用無字首宣告來提供每個屬性的永久版本。當規範成為最終版本且實現經過完善後，瀏覽器字首將被取消。

即使用這些字首來維護程式碼似乎需要很多工作，現在使用CSS3，仍然是利大於弊。除了需要改變一些字首屬性來修改設計元素外，維護基於CSS3的設計還是比通過圖形程式更改背景影像或處理那些其他標記和黑客指令碼所帶來的弊端要容易一些。此外，如上所述，您的程式碼更不會過時。