8/09/2009

CSS3 初體驗

最近 Firefox 3.5 的推出讓 "只聞樓梯響, 不見人下來" 的 CSS 3 有了眉目. 因為 Firefox 3.5 支援不少 CSS 3 屬性, 這一點比 IE 8 強一些.

IE8 標榜支援 Web Standard 和通過 Acid2 檢測 (註1.), 完全支援 CSS2.1 版本. 算是 IE 的一大步, 所以我們會發現 IE8 的 CSS 寬高顯示都與Firefox一致, 這是喜的部份; 憂的是 IE 6, 7, 8 版的顯示差異就足以讓設計師們手忙腳亂好一陣.

要特別一提的是目前瀏覽器支援的 CSS3 屬性尚未成為 W3C 的推薦標準, 未來仍有被取消的可能性, 所以瀏覽器制定了各自的專有屬性, 要與標準屬性做區分. 這些專有屬性並無法通過 W3C 的 CSS 驗證, 不在意驗證的使用者可以當作實驗或學習先使用.


瀏覽器專有屬性置於 selector (選擇器) 之前, 例如: -moz-border-radius-topleft: 20px;

各瀏覽器的專有屬性標示法如下:

Safari: -webkit-
Firefox: -moz-
Konqueror: -khtml-
Opera: -o-
IE: -ms- ( IE 只有 IE8 支援 -ms- )

CSS3 新增很多 selector (選擇器) 和 property (屬性), 建議讀者先安裝好 Firefox 3.5 版瀏覽器, 其他 IE8, Opera, Safari 等視個人需求決定是否安裝. 接下來的 CSS 單元中將陸續介紹新版瀏覽器已經支援 CSS3 的部份, 敬請期待!


註1. Acid2 是檢驗瀏覽器對 Web Standard 的 HTML、CSS 2.0、PNG 圖像支援能力指標, 已經通過檢測的有 Safari 2.02 以上版本, Opera 9.0 以上版本, Firefox 3 以上版本, Opera Mobile 行動裝置版, IE 8 和 Chrome) , 未來的瀏覽器對 CSS 的解譯和呈現會更趨於一致.

1 則留言:

壞掉的印表機 提到...

阿姐的文章還是一樣很讚!!! 呵呵