iT邦幫忙

DAY 4
9

HTML5試試看系列 第 4

[HTML5試試看-4] 偵測HTML5支援及可能替代方案

HTML5雖然各瀏覽器還在如火如荼加緊腳步支援,但是...規格還有可能變動,而各家瀏覽器對於標準的支援可能也還不一致。另外...舊的瀏覽器當然也不支援。面對這樣子複雜的狀況,與其偵測瀏覽器版本來決定功能,不如效法jQuery的做法,利用偵測瀏覽器的「能力」來決定要用什麼方法來支援。

另外,html本來就允許擴充標籤名稱,所以除非跟功能與效能緊密相關(像是Canvas, Audio, Video等),其實有一些方法可以提供某些標籤與舊版瀏覽器一些起碼的相容性。
為了試試看HTML5,自己第一個想到的就是要如何偵測瀏覽器對於HTML5標籤的支援。要快速而簡便地做到這件事情,當然一定得靠Javascript,而且要假設瀏覽器對於DOM及標籤的支援是一致的。在這個前提下,利用document.createElement()產生與HTML5標籤對應的DOM物件,然後檢測他是不是具有該有的屬性及方法,應該就可以做到快速的測試。

利用document.createElement()也可以產生自訂標籤的對應物件,不過在這個狀況下,這個物件只會有HTMLElement的基本屬性。所以即使瀏覽器不真正支援HTML5標籤及對應的DOM物件,使用document.createElement()也不會產生任何錯誤。所以需要更詳細地針對個別物件應該具備的屬性,特別去做檢查。Javascript透過for...in敘述,就可以做出reflection的功能,但是有陷阱。有些瀏覽器可能會在'''內部'''將某些屬性設定為[DontEnum](不可列舉)的,這樣使用for...in無法列舉出這些屬性,不過使用這些屬性並不會有問題。保險的方式,是把該有的屬性全部找出來(這只好在標準文件內一個一個找),一個一個檢查。另外,既然所有的標籤都是HTMLElement,也可以透過這裡面只在HTML5才定義的屬性,來檢查這些標籤。因為有些標籤並沒有個別的屬性,只單純使用HTMLElement定義的屬性,不這樣檢查,也沒有別的辦法。

以下是之前自己寫的測試程式(太長了,貼不下...還是更新到blog上):
嘗試偵測瀏覽器對於html5 tag的支援(補充)

除了各標籤的特定屬性之外,選擇了contentEditable作為HTML5 HTMLElement通用屬性偵測的標的。為什麼選這個?因為...其實很多屬性雖然在HTMLElement有定義,但是除了Chrome7全部都支援,其他瀏覽器對於通用屬性的支援其實並不一致,所以測試了一下,挑了contentEditable,因為他看起來大家都支援。

Mozilla網站上,有不少介紹HTML5的文章,其中有一篇提到了一些在不支援HTML5的瀏覽器中支援Sections相關標籤的方式:Using HTML5 Elements in Non-HTML5 Browsers。他的方法是透過CSS及針對IE的patch,來讓這些標籤當作「自訂標籤」來使用。不過這樣只是讓畫面顯示不會出問題,而文件大綱的邏輯並不會用這樣的方式就可以支援。

HTML5的許多功能,主要是在簡化過去需要依賴外掛(Flash)、Javascript(例如表單驗證)等才能做到的事情,沒有HTML5,有許多功能並不是做不到,只是很麻煩。不過像Canvas繪圖、Web Worker多工、通訊等,大概很難有替代方案。另外,由於這些東西納入到HTML,所以CSS也對他可以產生作用,如果靠外掛也是無法做到的。例如使用CSS,可以讓Video標籤播放的影片,做出即時倒影或是半透明的效果等等。這些都有聽說...之後再來試試

總之,如果想讓支援與不支援HTML5的瀏覽器都可以使用自己開發的網頁應用程式,需要花很大個功夫。偵測是否支援某項功能是比較簡單的,只要偵測某個標籤及相對應屬性是否可用就好了。複雜的是針對支援HTML5跟不支援HTML5分別做出相對應的功能。

另外一種想法是,用HTML5做出超酷炫功能,吸引使用者放棄舊版瀏覽器,這是Eric大神的意見...請看黑暗執行緒大大在TechDay的筆記:
TechDays 2010 隨堂筆記 0930

明天來看看HTML5的文件結構。

參賽文章


上一篇
[HTML5試試看-3] 站在DOM的肩膀上
下一篇
[HTML5試試看-5] HTML文件結構今昔
系列文
HTML5試試看30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
SunAllen
iT邦研究生 1 級 ‧ 2010-10-15 15:31:58

臉紅 HTML5 會不會自動產生想要的網頁,這樣每天的工作,只要「想」就好啦毆飛

沙發

fillano大大,會不會有實際範例show 一下

fillano iT邦超人 1 級 ‧ 2010-10-15 18:31:30 檢舉

後面會有阿,而且我blog文章中都已經有測試程式。

0
fillano
iT邦超人 1 級 ‧ 2010-10-15 18:30:33

我這裡也只是構想,如果想要做的話要怎麼做比較好。不過實際上已經有很多應用了,用關鍵字查詢:「html5 framework」就會有一些現成的解決方案,這些方案會兼顧跨瀏覽器的問題。已經有輪子就不用自己造了開心

也許後面試試看過後再來介紹一下忙

瀏覽器的支援其實進步很快,幾個星期前所有的瀏覽器都還沒有支援全部的HTML5標籤,但是今天測試過發現,除了IE9 Beta之外...

這幾天最熱門的新聞是...Facebook逐漸引入HTML5技術,但是W3C提出警告,說HTML5還不成熟XD

0

fillano提到:
for...in敘述

看來時不我予~!指令很多都沒看過咯~!哭
(費公也碰到「5000字」限制啦~!XD

我要留言

立即登入留言