資訊科技趨勢分析: CSS3與瀏覽器

何謂CSS？　　　　　　　　　

•簡介

　Cascading Style Sheets（簡稱CSS），中文翻譯為「層疊樣式表」或「串聯樣式表」。

　相信大家對CSS應該不會陌生，由於它所帶來的便利性，也成為大家所逐漸普遍使用的網路標準。CSS是由W3C所定義和維護的標準之一。如果說HTML負責的是網頁結構，而CSS則為網頁提供設計。如此便可以把網頁的結構和設計分開，讓網頁開發人員專注負責網頁的結構和內容，網頁設計師則可以安心用CSS給網頁作設計。這樣不只簡化了網頁的結構，同時也強化了程式碼的可讀性以及可維護性(maintainability)。每當網頁改版時，設計師只要更改CSS文件即可影響整個網頁的設計，而不需一個個的去改。

　CSS目前的版本是CSS 2.1，下一代CSS是CSS 3，但目前W3C仍在修改及定義CSS 3。不過慶幸的是，許多CSS 3的屬性已經可以被運用了。

•CSS樣式規則

　CSS由一條一條樣式規則（style rule）組成，包含選擇器（selector）與宣告（declaration）。

範例

•CSS架構

CSS版本演進　　　　　　　　

•CSS 1-發表於 1996年12月
　The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:
　1. Font properties such as typeface and emphasis
　2. Color of text, backgrounds, and other elements
　3. Text attributes such as spacing between words, letters, and lines of text
　4. Alignment of text, images, tables and other elements
　5. Margin, border, padding, and positioning for most elements
　6. Unique identification and generic classification of groups of attributes
　7. The W3C no longer maintains the CSS1 Recommendation.

•CSS 2-發表於1998年5月

　CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation.

•CSS 2.1-發表於2002年

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.

•CSS 3-發表於2005年12月
　CSS level 3 has been under development since December 15, 2005. The W3C maintains a CSS3 progress report. CSS3 is modularized and consists of several separate recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

CSS 3發展現況　　　　　　　

•CSS3 的新功能
　1. 圓角：提供瀏覽器可畫圓功能。
　2. 漸變色。
　3. 陰影：於元件旁加上陰影。
　4. 加入透明色：可使單一顏色有透明度，並不會讓整個元件透明。
　5. transform：可對元件作多種轉換，去做多種的變形有rotate、scale、skew、translate...。
　6. animation：可使元件有動畫的呈現。

•CSS3 的缺點
　1. 目前 IE 瀏覽器並不支援，且於各瀏覽器版本不同支援有限，大多必須用瀏覽器專有屬性標示法，所以容易使樣式檔案過大且複雜。
　2. 目前 CSS3 教學測試用瀏覽器：Mozilla Firefox 3.6+、Opera 10.5+、Safari 4+、Google Chrome 4+。
　3. 請使用者盡量保持以上瀏覽器為最新版本,已達到最好的支援效果。

CSS 3在各瀏覽器的顯示　　　

　根據2010年11月份的統計，各家網頁瀏覽器使用者占有率：
　1. Internet Explorer（46.22%）
　2. Mozilla Firefox（29.92%）
　3. Google Chrome（12.40%）
　4. Safari（5.55%）
　5. Opera（1.93%）
　6. 行動瀏覽器（3.49%）

　因此，我們以前五家瀏覽器來看CSS 3的網頁測試。
•測試頁面：CSS 3語法繪製的哆啦A夢
　這是『純CSS語法』所畫出來的哆啦A夢，是CSS高手基於CSS3技術所製作出來的哆啦A夢，你一定很好奇的想要馬上看看這個頁面，大家可以先用各種不同瀏覽器來開以下頁面看看，開啟後可以檢視原始檔，確實是沒用到半張圖片的純CSS製作哦：
　http://images.steachs.com/doria/

•Google Chrome 7.0
　