最新網際網路文章

Image credit:

波堤獅告訴你目前各家瀏覽器對 CSS3 的支援狀況...(台灣製造)

J Chiang
2011 年 5 月 11 日, 下午 04:00
418 分享次數
分享
分享
Twitter 發表
line
電郵
儲存
[作者:Par-Salian]

(請注意IE7與IE版的波提獅)

如果把IE5、6、7、8、9都加起來,說IE是最多人使用的瀏覽器,應該當之無愧,不過比較多人用不代表IE的瀏覽器顯示是正確的,雖然多數正義一直是網路上最常見的真理,但遇上了HTML5CSS3、還有那個不知道會不會變成標準的WebM,這個多數暴力完全發揮不了效用。

IE7(左側)顯然是拿槍自裁。IE6(右側)這根本已經不知道原型是啥了,難怪波提獅會哭哭


不久前,小薑曾寫過一篇用小叮噹測試各家瀏覽器CSS3支援的文章,那是日本的Pure CSS Design的網頁,由神人ShopDD製作。所謂的Pure CSS指的是不使用任何一張圖片,純粹用DIV背景色、切邊、圓角、陰影等CSS語法來「畫出」一個圖形,因為整個頁面都是用CSS來「畫」的,所以當瀏 覽器對CSS的支援不佳,很容易就會讓最後的成品變成一個神秘的外星圖像,之前小薑介紹的哆啦A夢 小叮噹 Pure CSS網頁就是一例,可以看到IE8的哆啦A夢簡直是整形失敗。


IE8(最右側)的結果真的有機器貓的感覺,壞掉的那種~ XD


或許因為製作這樣的東西,可以展現一定程度的CSS控制技術與知識,所以台灣這邊也有能人YIJEN製作 "波提獅" (Pon De Lion)的Pure CSS頁面,這次還多使用了@font-face(外部文字定義)的技術,援引網路字型來讓頁面呈現的文字更美觀,更加入了keyframes Animate的動畫效果,讓波提獅搖搖尾巴(僅支援使用 Webkit核心的Chrome & Safari),想要看看各種瀏覽器效果的讀者可以到Live Demo網頁一瞧究竟。


延伸閱讀:
Pure CSS Design
Shop DD
小叮噹 Pure CSS頁面
IE9支援的CSS3屬性列表