HTML5與Flash的話題最近吵了許多次,但無論如何網路標準朝向HTML5發展已經是勢在必行。各家瀏覽器也都開始標榜與HTML5的相容性,不過嘴砲人人會打,還是直接來個廝殺比較快,通通抓起來進行HTML5相容測試吧。

先前看到測試HTML5的方式,大多類似微軟替IE9推出的Test Drive、以及我們最近介紹的Apple推出HTML5測試網頁,以直接玩弄HTML5功能為主。本次測試HTML5的網站為html5test.com,它是類似Acid3PEACEKEEPERSunSpider等Benchmark網站,直接以數據化方式呈現,網頁也會附上測試各項HTML5功能通過與否,與實際把玩HTML5功能的取向不同。

這裡不免俗的挑選5大瀏覽器:IE8、Firefox 3.6、Chrome 5、Safari 4、Opera 10.5作為測試對象,以目前官方所公佈最新的正式版為準(測試時間:2010年6月7日下午2點22分)。html5test.com滿分為160分,以下就直接公佈殘酷的分數:

▲Chrome 5.0.375.55,html5test.com測試分數為142分。

▲Safari 4.0.5,html5test.com測試分數為115分。

▲Opera 10.53,html5test.com測試分數為102分。

▲Firefox 3.63,html5test.com測試分數為101分。

▲IE8,html5test.com測試分數為19分。

▲加映IE9 Platform Preview版本,html5test.com測試分數同樣停留在19分。

搞懂html5test在測試哪些項目?

這些HTML5測試都屬於W3C中Working Draft和Editor's Draft中的項目,共有DoctypeCanvasVideoAudioGeolocationStorageOffline Web ApplicationsWorkersSection elementsGrouping content elementsText-level semantic elementFormsUser interaction等12大類別,有興趣的網友可以點選測試網頁中的項目,連到W3C官方網站觀看相關的文件。

其實這些測試也不能說100%公平,如果翻開程式碼,仔細觀查其中有不少"-Webkit-"和"-moz-"開頭的程式碼,這些是給特定渲染引擎辨認的CSS3私有屬性,例如"-webkit-"開頭的屬性就是給webkit引擎如Chrome、Safari使用,"-moz-"則是給Firefox用的Gecko引擎(屬性名稱一看就知道是Mozilla縮寫);另外也看到一個"-o-"的標記,這是給Opera瀏覽器的Presto所使用。有了私有屬性的加持,肯定能完整呈現正確的CSS3格式。

▲影響成績的因素眾多,連不同支持立場都會左右分數高低。

此外成績也會依瀏覽器的支持立場不同有變更,例如Video測試中的H.264支援項目,只有Chrome和Safari支持H.264 codes而拿下分數,其他幾家則只支持Ogg Theora、挑明不想付權利金所以不支援H.264;最賊的還是Chrome兩邊都支援,所以拿下了滿分。Opera科技長Håkon Wium Lie前陣子來台時,也提到Opera對HTML5的支援是取決於是否已經進入W3C推薦候選名單,還沒定案的就不支援,這樣多少也會影響到整體成績表現。

綜觀各瀏覽器成績,榜首Chrome擁有飛快的更新頻率,能迅速將HTML5支援做到最好,Google本身也相當支持HTML5,還在Google I/O秀了一段HTML5的API過;Apple更是愛HTML5,Safari成績好也不難理解。擁有一堆CSS3私有屬性的Firefox竟然不比沒什麼私有屬性的Opera佔到多少便宜,只能說Opera有CSS之父Håkon Wium Lie加持果然不一樣;至於IE8......也不意外啦,人家才不甩你有沒有HTML5,反正它已經是全球市占率最高的瀏覽器了(詳見Net ApplicationsStatCounter調查)。

另外IE9雖然有在自己的Test Drive測試網頁上搞些HTML5相關的名堂,怎麼在這邊測試還是落到如此下場,可能是比起HTML5他們更醉心在GPU硬體加速功能上,但因為現在IE9只是Preview版本,這邊就先放過他吧。

HTML5加碼再測試

這網站還另外端出一個更多HTML5功能的測試網頁,網址為beta.html5test.com,總分提升到了300分。我們繼續把5大瀏覽器丟進去跑跑看成績:

▲Chrome 5.0.375.55,beta.html5test.com測試分數為192分,外加7個加分題。

▲Safari 4,beta.html5test.com測試分數為分128分,同樣多了7個加分。

▲Opera 10.5,beta.html5test.com測試分數為129分,多了4個加分。

▲Firefox 3.6,beta.html5test.com測試分數為139分,多了4個加分。

▲IE8,beta.html5test.com測試分數為27分,並沒有拿下任何加分。

▲加映IE9 Platform Preview版本 ,beta.html5test.com測試分數贏過IE8拿下32分。

成績排名與預想的差不多。這些測試其實不能代表什麼,因為HTML5還尚未定案(樂觀估計也要2012年後);同時瀏覽器畢竟是上網工具,不同於CPU、顯示卡測數據這麼客觀,對每位使用者好用與否的主觀因素才是更重要。

延伸閱讀:

Opera技術長Håkon Wium Lie來台,談HTML5與CSS3

【搜文解字】HTML5,帶動網路進步的次世代標準

【O專欄】SVG:可縮放向量圖形的好處與可能性

【O專欄】CSS 3:網頁外觀新衝擊之字型篇

【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

【O專欄】備受矚目的 HTML5 Video標籤

【O專欄】搭配網路標準讓HTML5 Video更活潑