天天看點

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

<a href="http://www.cnblogs.com/lhb25/archive/2011/06/30/10-jaw-dropping-html5-and-javascript-effects.html" target="_blank">讓人眼花缭亂的 HTML5 和 JavaScript 效果</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/30/1992023.html" target="_blank">使用 CSS3 可以實作的五種很酷很炫的效果</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/04/07/1965738.html" target="_blank">九個讓人難以置信的HTML5和JavaScript實驗</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/04/12/1964343.html" target="_blank">推薦18個基于 HTML 5 Canvas 開發的圖表庫</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/27/html5-canvas-best-games.html" target="_blank">29款基于 HTML5 Canvas 開發的網頁遊戲</a>

  各大主流浏覽器對 CSS3 和 HTML5 的支援越來越完善,曾經讓多少前端開發人員心碎的IE系也開始擁抱标準。就在前幾天,W3C的 HTML5 社群領袖 Shelley 宣布,HTML5的開發工作已經接近完成,如果進展順利,HTML5 将在 2012 年正式成為國際标準。

  當然,即使标準正式制定了,現代浏覽器要普及到大部分使用者也是需要一個相當漫長的過程。如果你現在就希望使用 CSS3 和 HTML5 建立你的站點,需要對各個浏覽器對這兩種新技術的支援情況有一個全面了解。本文是一份IE,Chrome,Firefox, Safari,Opera五大主流浏覽器,在 Mac 和 Windows 兩個平台,對 CSS3 和 HTML5 各種特性支援情況的詳細清單。

  從表中可以看出,CSS Transforms 3D 還沒有浏覽器支援,除此之外的其它屬性在 Windows 平台,Chrome 和 Safari 全部支援,其次支援比較好的是 Opera 和 Firefox,曾經一片紅叉的 IE 開始迎頭趕上。在 Mac 平台 Safari 仍然表現優異,其次是 Firefox 和 Opera。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  最讓人高興的就是這張表了,除了 IE 9 以下的版本,其它浏覽器已全部支援 CSS3 選擇器,包括 IE 9 和 将在明年釋出的 IE 10。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  從表中可以看出,除了用戶端資料庫 IndexDB 和 觸控(Touch)事件外,其它特性 Chrome 和 Safari 都全部支援,微軟還得加油啊。(更新:經驗證 Chrome 10 和 Firefox 4 已支援 IndexDB,Firefox 4 也已支援 WebSocket,不過由于安全原因預設是不開啟的,我們可以通過 about:config 重新啟用 WebSocket,隻需啟用 network.websocket.override-security-block 選項即可。)

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  這應該是 HTML5 最令人期待的東西了,内置畫布,視訊,音頻,SVG,WebGL等對象。全部支援的有 Chrome,Firefox,還有 IE 9,很驚訝吧。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  Chrome 又是全部支援,Safari 除Ogg Vorbis 外全部支援,IE 9 開始支援 MP3 和 AAC。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  還是 Chrome 最厲害,包容天下,不知道 H.264 能否成為統一的視訊編碼标準,期待。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  這些浏覽器中最淡定的要數 Opera 了,那麼多年了市場佔有率都沒什麼大變化。在 Windows 和 Mac 平台,Opera 對 HTML5 表單對象全部支援,IE 家族全軍覆沒。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  IE 又一次全軍覆沒,Opera 依然全部支援,其次是 Safari,Chrome,Firefox。

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

  目前,對 CSS3 和 HTML5 支援最好的是 Chrome,Safari 次之,Firefox 和 Opera 旗鼓相當,IE 9開始擁抱标準。鑒于這種情況,假如你想使用這兩項新技術建立一個先鋒體驗式站點,現在的 CSS3 和 HTML5 可以讓你實作,假如你想大規模應用于實際項目,現在還為時過早。

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/24/1993297.html" target="_blank">推薦21款最佳 HTML 5 網頁遊戲</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/05/09/2020286.html" target="_blank">8個驚豔的JavaScript WebGL 應用實驗</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/03/16/1965681.html" target="_blank">HTML 5 标簽、屬性、事件及浏覽器相容性速查表</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊!30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥!8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂!35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34個漂亮網站和應用程式背景管理界面</a>

五大主流浏覽器 CSS3 和 HTML5 相容性大比拼

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀:)</a>

歡迎任何形式的轉載,但請務必注明出處。

繼續閱讀