今天不嘴炮，5大瀏覽器跑HTML5測試

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

先前看到測試HTML5的方式，大多類似微軟替IE9推出的Test Drive、以及我們最近介紹的Apple推出HTML5測試網頁，以直接玩弄HTML5功能為主。本次測試HTML5的網站為html5test.com，它是類似Acid3、PEACEKEEPER、SunSpider等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中的項目，共有Doctype、Canvas、Video、Audio、Geolocation、Storage、Offline Web Applications、Workers、Section elements、Grouping content elements、Text-level semantic element、Forms、User 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 Applications、StatCounter調查）。

另外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更活潑