[HTML5]檢測 HTML5 的功能 - Modernizr

HTML5已經是現行網頁開發的趨勢，雖然各大主流的Browser都已經支援大部份的HTML5功能，但是各家Browser支援程度也有所差異，亦有鑒於還有相當部份的user仍在使用老舊的Browser（如IE 6，7等）。
網頁開發者在開發上，不管是要做到相容各個版本，還是只是簡單的告訴user“你的瀏覽器並不支援XXX功能”，都需要進行支援度的判斷

因為HTML5並不是一種獨立的功能或是語言，而是很多獨立功能的集合，所以我們需要判斷的，並不是這個Browser有沒有支援HTML5，而只是需要判斷他有沒有支援HTML5某個功能而已。

在這裡介紹一個javascript的plugin - Modernizr
Modernizr是一個可以測試HTML5 函式庫的opensource。可檢查許多針對HTML5和CSS3功能的支援。
請自行下載modernizr.min.js，引用到自己的網頁內。


當Modernizr執行時，會建立一個static object - Modernizr，透過直接呼叫Modernizr內的object來產生判斷是否有支援某個功能的boolean值。

Canvas

HTML5中透過<canvas>元素，可使用javascript進行繪圖，要知道user的瀏覽器有沒有支援<canvas>，我們可以直接使用：

if(Modernizr.canvas){
  //support!
  // draw something
}else{
  // not support
  alert("你的瀏覽器不支援canvas元素");
}

Canvas Text

有些Browser雖然支援<canvas>，但卻不支援在canvas中繪製文字，這是因為canvas text是在後期才加入的API，故有些早期有支援canvas的browser後來卻沒有引入。
檢查canvas text，我們可以使用：

if(Modernizr.canvastext){
  //support!
  // draw some text
}else{
  // not support
  alert("你的瀏覽器不支援canvas中繪製文字");
}

Video

在HTML5中，不用透過如window media player或flash等的plugin，只要使用<video>元素，指定其src，就可以直接播放影片，相當方便。要檢查有否支援<video>，可使用：



另外，雖然某些browser有支援影片<video>元素，但未必每種影片的格式都會支援，這時便需要判斷browser是否有支援某種codec，而這個檢查，Modernizr也有提供相對的功能

Local Storage

使用local storage，讓用戶端的資料能夠儲存於local端，不用受限於cookies，也可節省時間和頻寬去和server做溝通，使用HTML5 storage，用javascript就可以直接存取儲存起來的data了。檢查是否有支援Local Storage功能，可使用：

Web Workers

Web workers就是為browser提供可在background執行javascript的方法。若有寫過java的朋友，web workers就相等於 thread（執行緒）的作用。
有了background threads，在user操作UI的時候，就可以同時在背後執行一些運算，而又不會讓user的介面操作卡在某個運算的過程中，諸如複雜的數學運算，網路request，data access等，都會是一些耗時的動作，讓這些耗時的動作在background執行，便不會影響user在介面操作上的流暢度。
對於Web Workers的支援，可用：

Application Cache

若果有些網頁的操作不用隨時都使用到網路上最近的資料，像是網路小說，文件，影片等，基本上如果下載完之後，就可以在local site去閱讀或使用的話，可以考慮使用application cache來處理
當browser瀏覽有支援application cache的網站時，一旦browser下載了所有必要的檔案後，即使並未接上網路，我們也可以瀏覽這網站。在離線狀態所做的改變，變網路恢復時也可以被上傳到server裡，gmail離線版就是使用了這個功能。
檢查Application cache：

---

以下的一些功能比較簡單，我就直接介紹用法了

Geolocation 定位

Modernizr.geolocation

Input Type 表單輸入

HTML5中新增了十幾種表單中的類型，以方便進行某些情況的輸入
像是

• search
• number
• range
• color
• tel
• url
• email
• date
• month
• week
• time
• datetime
• datetime-local

Modernizr.inputtypes.search

Modernizr.inputtypes.number

Modernizr.inputtypes.range

...
...

Placeholder Text

當輸入欄是空白或不是被focus的時候，會預設在輸入欄中的文字，通常是用來當輸入的說明用的

Modernizr.input.placeholder

Auto Focus

使用autofocus，就可以在一個網頁載入後指定滑鼠遊標直接跳到哪個input輸入欄中，就像到Google首頁時，會自動幫你把遊標跳到search bar裡。

Modernizr.input.autofocus

P.S. 以上所有的用到的Modernizr中的方法都是回傳boolean值
有支援 － true,
沒支援 － false
還要注意的是，像是localstorage, applicationcache，等的複合字，必為小寫，與DOM的寫法不一樣。





以上資料由我自己閱讀 O'Reilly的<<HTML5 建置與執行>> 一書後整理出來，也有引用到當中一些句子說明。