HTML5瀏覽器支援

現在撰寫 HTML5 最大的問題就是瀏覽器的支援問題了。除了每家瀏覽器要使用自己的HTML5標籤外,舊版的瀏覽器更慘,完全看不懂也無法處理新的 HTML5 標籤。本篇將整理格主搜集到的各種瀏覽器支援方法,盡量讓 HTML5 能在各版本的瀏覽器中運行。

檢查瀏覽器對HTML5的支援

Modernizr 是 MIT 授權的 HTML5 檢測函式庫,有了它可以針對網站上的 HTML5 功能做檢查,減少瀏覽器支援上的錯誤。它的官方網站中有提供標準版本與客製化的版本,設計者可以針對自己需要檢查的項目做勾選,產生的檔案會比標準版小,不過我是建議用標準版就好了。由於 HTML5 與瀏覽器都還在持續發展中,所以它的函式庫版本也會不斷更新,開發者可以定期去更新。

它的用法很簡單,在網頁中載入JS檔後,就可以使用「Modernizr.function」來測式,回傳值都是boolean。例如使用 Modernizr.canvas 來了解瀏覽器是否支援 Canvas 標籤。所有的測式方法都寫在 Modernizr文件中。

對未知標籤的處理

每一種瀏覽器都有它支援的標籤,最容有問題的就是微軟的 Internet Explorer,如果是使用 IE 8 以前的瀏覽器(含IE8),會因為 IE 不認識 HTML5 的新標籤,導致網頁顯示錯誤。HTML5 新標籤的效果(如影片、繪圖)無法顯示就算了,更慘的是網頁的結構會被破壞!簡單的來說就是網頁可能不會按照我們設計的排版來顯示,這會使畫面變得一團亂……

舉例來說,

這段語法裡,

的子元素,但是在 IE 8 以前的瀏覽器中,會因為看不懂
,使這二個標籤變成平行的同一個層級,而且
所有定義的 CSS 效果也都不會被顯示出來。為了解決這個問題,可以使用 JavaScript 宣告元素,這樣 IE 就會看得懂了(放在前面):


不過 HTML5 新增的元素很多,要一個一個去設定也很麻煩。網路上已經有MIT開放授權的原始碼可以讓我們下載,甚至直接使用連結指向代管的版本(放在前面):


IE Canvas支援

舊版的 IE 雖然不支援 Canvas 繪圖,不過它有自己的 VML 技術可以使用。網路上已經有 Apache 開放授權的原始碼可以下載使用。解壓縮之後取得excanvas.js,並且在網頁裡加入:


使用方法和一般的 完全一樣,但有一點小限制:

  • 不支援放射漸層 createRadialGradient。
  • 不支援裁切區域。
  • 圖案必須同時在垂直與水平方向重覆。
  • 非對稱的伸縮無法正確顯示。
  • 速度緩慢。

此外,的操作要等到 onLoad 事件啟動之後再進行會比較保險,否則 IE 會告訴你它不支援這些方法。