建站
咨詢
售后
建站咨詢
新聞中心
隨著HTML5技術(shù)的普及和推廣，Web開發(fā)社區(qū)逐漸開始嘗試在RIA（富互聯(lián)網(wǎng)應(yīng)用）中使用HTML5，這種實踐主要優(yōu)勢在于開發(fā)人員能夠通過 HTML5的各種技術(shù)以一種***的統(tǒng)一、簡潔、無插件依賴的方式實現(xiàn)炫目、復(fù)雜的Web應(yīng)用，HTML5的優(yōu)越性已經(jīng)得到了開發(fā)社區(qū)的普遍認(rèn)可。
不過，就像其他Web技術(shù)誕生時的情況一樣，作為新生兒的HTML5在各種Web瀏覽器中的實現(xiàn)程度或者說平臺兼容性一直是Web開發(fā)人員的心病。本文將介 紹Web瀏覽器對HTML5技術(shù)的兼容性，希望能夠幫助Web開發(fā)人員在應(yīng)用HTML5技術(shù)時充分考慮到平臺差異性。
從2006年WHATWG和W3C決定合作制定HTML5標(biāo)準(zhǔn)以來（預(yù)計2012年成為候選標(biāo)準(zhǔn)），瀏覽器廠商都不甘落后，一直在努力實現(xiàn)更多的 HTML5技術(shù)，不過由于各個廠商的步伐不一，導(dǎo)致HTML5在瀏覽器中的實現(xiàn)程度參差不齊。在這里我們將綜合兩種HTML5兼容性測試工具包 HTML5Test和Modernizr的測試結(jié)果來分析一下Web瀏覽器的支持程度。
考慮到HTML5標(biāo)準(zhǔn)的制定原則：新特性基于HTML、CSS、DOM 以及 JavaScript；減少對外部插件的需求（比如Flash）；獨立于設(shè)備等，我們選取了HTML 5的幾項主要特性來評價瀏覽器系統(tǒng)。
1、視頻播放標(biāo)記video
2、音頻播放標(biāo)記audio
3、繪圖標(biāo)記canvas
4、表單控件標(biāo)記url、email等
5、本地客戶端存儲
瀏覽器（版本）選取
由于目前市面上的瀏覽器品牌和版本繁多，我們難以覆蓋全部產(chǎn)品，因此在這里設(shè)定測試瀏覽器的選擇原則為：主流品牌、主流版本和***版本（正式發(fā)布）。依據(jù)StatCounter發(fā)布的2011年2~3月份瀏覽器市場占有率統(tǒng)計分布情況，主流品牌如圖1所示。
圖 1 主流瀏覽器分布圖
從圖1 中可以看出， 微軟的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多個版本占據(jù)了榜首，開源瀏覽器Firefox緊隨其后，其開放的體系結(jié)構(gòu)也吸引了眾多優(yōu) 秀插件，并成為Web開發(fā)人員的主要開發(fā)調(diào)試平臺。Google主推的Chrome后來居上，占據(jù)了第三名的位置。
瀏覽器主流版本分布情況如圖2所示。
圖2 瀏覽器主流版本分布圖
再加上部分***瀏覽器版本，我們選取的全部瀏覽器（版本）如表1所示。
表1 測試瀏覽器
HTML5兼容性分析
視頻播放標(biāo)記video
在HTML5技術(shù)出現(xiàn)之前，大部分Web視頻播放是通過瀏覽器插件如Adobe Flash來實現(xiàn)，這要求客戶在觀看視頻之前安裝相應(yīng)的組件。video標(biāo)記的出現(xiàn)使開發(fā)人員不再依賴于特定第三方技術(shù)，下面的代碼片段播放了一個視頻文 件，設(shè)定了畫面的尺寸，并帶有控制按鈕（暫停/進度條等）：
video元素潛在地支持多種視頻格式，包括：
1、Ogg——采用Theora視頻編碼和Vorbis音頻編碼的Ogg視頻文件；
2、MPEG4——采用H.264視頻編碼和AAC音頻編碼的MPEG 4視頻文件；
3、WebM——采用VP8視頻編碼和Vorbis音頻編碼的WebM視頻文件。
這些視頻格式在HTML5最終標(biāo)準(zhǔn)的接納程度目前還在各方博弈之中，不過瀏覽器已經(jīng)開始選擇性地支持Video標(biāo)記了。表2是兼容性測試結(jié)果。
表2 視頻標(biāo)記video測試結(jié)果
這里有幾點需要注意：
1、***發(fā)布的I E 9 默認(rèn)只支持MP EG4（H.264編碼）格式文件（支持硬件加速），如果安裝了WebM/VP8插件，可以支持WebM視頻格式。
2、Safari瀏覽器依靠QuickTime做視頻播放，所以Safari支持的視頻格式與QuickTime一致。請注 意：QuickTime在 Mac機上是預(yù)裝的，其默認(rèn)支持的視頻格式是MPEG4，但在Windows系統(tǒng)上QuickTime需要手動安裝，也就是說在Windows上默認(rèn)情況 下Safari是不支持所有視頻格式的，這一點需要Web開發(fā)人員了解。
3、Firefox 4.0還將支持WebM格式。
4、Chrome已經(jīng)宣布不再支持MPEG格式的視頻。
5、Video元素有一個preload屬性，可能的值包括：
（1）Auto——當(dāng)頁面加載后載入整個視頻；
（2）Meta——當(dāng)頁面加載后只載入元數(shù)據(jù)；
（3）None——當(dāng)頁面加載后不載入視頻。
Web開發(fā)人員應(yīng)該根據(jù)網(wǎng)頁的實際環(huán)境來選擇合適的預(yù)加載屬性以達(dá)到較好的前端性能。
音頻播放標(biāo)記audio
與視頻標(biāo)記vidio類似，音頻播放標(biāo)記audio也是HTML5標(biāo)準(zhǔn)引入的元素，下面的代碼播放了一段音頻，帶有控制按鈕：
audio潛在地支持多種音頻格式，包括Oggvorbis、MP3、AAC、wav等，不同瀏覽器對audio標(biāo)記的支持程度表3所示。
表3 音頻標(biāo)記audio測試結(jié)果
有幾點需要說明：
1、因為存在包含關(guān)系，所以音頻標(biāo)記auido的情況基本與video的結(jié)果保持一致；
2、IE8對video和audio標(biāo)記都不支持，IE9剛剛引入這些元素；
3、audio元素同樣具有preload屬性，注意正確設(shè)置屬性值。
繪圖標(biāo)記canvas
在Web 2.0的世界里，炫目的圖形是必不可少的組成部分。HTML5引入的canvas元素支持Web開發(fā)人員通過JavaScript在頁面上繪制線條、圖形、添加文字和圖像等。下面的代碼片段在頁面上簡單繪制了一個藍(lán)色矩形：
Canvas的測試結(jié)果如表4所示。
表4 繪圖標(biāo)記canvas測試結(jié)果
我們欣喜地看到，各種瀏覽器對canvas的支持度非常高，對于IE8的限制，可以通過開源項目ExplorerCanvas來解決，只需要兩步操作：
1、包含js文件
2、直接包含canvas元素或者動態(tài)創(chuàng)建它：
Form 2.0表單元素
對于企業(yè)級Web應(yīng)用來說，表單控件是最重要的頁面元素之一。在HTML 5之前，各種類型的表單只能由開發(fā)人員通過復(fù)雜的屬性設(shè)置和限制條件（通過腳本計算）來完成。制定中的HTML 5標(biāo)準(zhǔn)引入了一系列分類清晰、功能完善的表單控件標(biāo)記，包括email、url、number、range、search、color等，還有表單屬性 autocomplete、autofocus等。這里提供一個簡單例子，用戶填寫電子郵箱（自動檢測格式正確與否）和個人主頁（自動檢測格式正確與否） 等，然后提交給后臺系統(tǒng)：
由于HTML5引入的表單控件、屬性比較多，這里選取了部分進行了測試，如表5所示。
表5 部分表單元素測試結(jié)果
幾點說明：
1、Firefox 4.0將開始支持email、url等表單元素；
2、自動填充已經(jīng)作為許多瀏覽器的一項基本功能存在，與HTML 5標(biāo)準(zhǔn)的autocomplete屬性需要區(qū)別開。
本地客戶端存儲
Web開發(fā)人員經(jīng)常通過cookie管理客戶信息，但是當(dāng)數(shù)據(jù)量比較大時，這種方法相對低效，一方面是因為cookie存在大小限制，另一方面每次都通過網(wǎng)絡(luò)請求來傳遞。HTML 5引入兩種新的存儲方式：
1、localStorage——沒有時間限制的數(shù)據(jù)存儲
2、sessionStorage——針對session的數(shù)據(jù)存儲
下面的例子分別使用LocalStorage和SessionStorge實現(xiàn)了簡單計數(shù)器，結(jié)果如表6所示。
表6 本地客戶單存儲測試結(jié)果
這項功能對Web開發(fā)人員來說非常強大，我們來看一下瀏覽器對sessionStorage和所有測試的瀏覽器都實現(xiàn)了HTML5的本地客戶端存儲 標(biāo)記！ 不過，這里要提一下安全性，Web開發(fā)人員在使用這些元素時，要時刻謹(jǐn)記存儲在客戶端的數(shù)據(jù)可能會被授權(quán)使用瀏覽器的其他人查看甚至修改，所以需要注意保 存敏感信息。
結(jié)束語
本文介紹了一些主流瀏覽器對部分HTML5技術(shù)的兼容性，一言以蔽之——參差不齊，Web開發(fā)人員在嘗試采用HTML5技術(shù)時，一方面會為其強大的表現(xiàn)力而激動，另一方面也會因為各瀏覽器的兼容性測試而煩惱，希望本文能夠讓大家對幾個關(guān)鍵技術(shù)的支持程度有基本的了解。
【編輯推薦】
- 從TaskBox協(xié)作平臺看HTML5技術(shù)的應(yīng)用與發(fā)展
- 學(xué)習(xí)HTML5不可錯過的12家國外網(wǎng)站
- Jeremy Keith談HTML5設(shè)計原則
- 微軟的“本地化HTML5”究竟意味著什么？
網(wǎng)頁標(biāo)題：瀏覽器對HTML5的兼容性分析
分享路徑：http://www.dlmjj.cn/article/dpjcspg.html
