對於Web開發者來說,CSS3不只是一門新奇的技術,更重要的是這些全新概念的Web應用給開發人員帶來了無限的可能性,也極大地提高了開發效率。我們不必再依賴圖片或者JavaScript去完成圓角、多背景、使用者自定義字型、3D動畫、漸變、盒陰影、文字陰影、透明度等提高Web設計品質的特色應用。
1 CSS3在選擇器上的支援
CSS3在選擇器上的豐富支援使得開發人員可以靈活地控制樣式。通過選擇器的使用,開發人員不再需要在編輯樣式時使用多餘的、沒有任何語義的class屬性,而可以直接將樣式與元素繫結起來,利用屬性選擇器可以很容易地根據屬性值的開頭或結尾選擇某個元素,利用兄弟選擇器可以選擇同級兄弟節點或緊鄰下一個節點的元素,利用偽類選擇器可以選擇某一類元素,從而節省在網站或Web應用程式設計完成後又要修改樣式所花費的時間。
2 CSS3在樣式上的支援
只要提起CSS3的特性是什麼,回答最多的就是“圓角”。不錯,圓角這個功能可以讓前端佈局節約大量的時間和精力去切圖拼湊一個圓角。CSS3還支援陰影(盒陰影和文字陰影)和漸變;可以自定義字型(使用@font-face);對於連續文字換行也新增了一些屬性,這既解決了連續英文字元出現頁面錯位的問題,也不需要後端程式去擷取這個連續字元;可以給邊框新增背景,支援背景調整大小和背景透明處理。
3 CSS3對於動畫的支援
CSS3支援的動畫型別有:變換、過渡和動畫。你可以對特定的屬性設定transition和animation的值實現動畫效果。
4 在實際開發中該如何使用CSS3
首先應遵循一個優雅降級的原則,比如前面談到的圓角,我們可以針對Firefox和Safari等支援圓角的瀏覽器應用CSS圓角,而那些不支援CSS圓角的瀏覽器則顯示為直角。其次,對於不支援CSS3的瀏覽器,可以使用JavaScript指令碼來實現。在向用戶或企業推廣新技術的同時也要關注他們的目標與可行性,不能為了技術而技術。