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 text，我們可以使用：
另外，雖然某些browser有支援影片<video>元素，但未必每種影片的格式都會支援，這時便需要判斷browser是否有支援某種codec，而這個檢查，Modernizr也有提供相對的功能
有了background threads，在user操作UI的時候，就可以同時在背後執行一些運算，而又不會讓user的介面操作卡在某個運算的過程中，諸如複雜的數學運算，網路request，data access等，都會是一些耗時的動作，讓這些耗時的動作在background執行，便不會影響user在介面操作上的流暢度。
對於Web Workers的支援，可用：
當browser瀏覽有支援application cache的網站時，一旦browser下載了所有必要的檔案後，即使並未接上網路，我們也可以瀏覽這網站。在離線狀態所做的改變，變網路恢復時也可以被上傳到server裡，gmail離線版就是使用了這個功能。
檢查Application cache：
以下的一些功能比較簡單，我就直接介紹用法了
像是
P.S. 以上所有的用到的Modernizr中的方法都是回傳boolean值
有支援 － true,
沒支援 － false
還要注意的是，像是localstorage, applicationcache，等的複合字，必為小寫，與DOM的寫法不一樣。
以上資料由我自己閱讀 O'Reilly的<<HTML5 建置與執行>> 一書後整理出來，也有引用到當中一些句子說明。
網頁開發者在開發上，不管是要做到相容各個版本，還是只是簡單的告訴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
- 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 建置與執行>> 一書後整理出來，也有引用到當中一些句子說明。
