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

本節書摘來自異步社群《html5與css3實戰指南》一書中的第1章，第1.5節,作者： 【美】estelle weyl , louis lazaris , alexis goldstein 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

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

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

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

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

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

供應商字首注釋

為了使用css3的一些新功能，需要包含幾行特殊的代碼。這是因為浏覽器供應商在添加執行css3的一些新功能時，使用了自己的字首版本屬性。例如，在firefox中轉換元素時，需要使用-moz-transform屬性；同樣，在基于webkit的浏覽器中，比如，safari和google chrome，您必須使用-webkit-transform屬性。在有些情況中，為使用一個css屬性，您可能必須添加4行代碼。這可能似乎會喪失一些從避免黑客、圖像及非語義标記所獲得的益處。

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

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