html5 Up and Running 學習筆記（二）
三、第三方檢測庫以及解決相應瀏覽器不支持html5新特性的方案
1、Modernizr
1.1 Modernizr是一個基於MIT許可證發佈的開源JavaScript類庫，用於檢測瀏覽器是否支持HTML5及css3新特性。
1.2 HTML5各API的檢測示例：
Moderniz是自動運行的，只要放在<head>標籤裏就行。
<canvas>
if(Modernizr.canvas){
// 開始畫些什麼吧!
}else{
// 瀏覽器沒有提供原生的canvas支持
// IE 需要第三方類庫exploerecanvas支持（IE8及以下）
}
<canvas> 文本API
if(Modernizr.canvastext){
// 讓我們畫些文字吧！
}else{
// 瀏覽器沒有提供原生canvas文本支持
// IE 需要第三方類庫exploerecanvas支持（IE8及以下）
}
<video> 視頻
if(Modernizr.video){
// 播放某個視頻
}else{
// 瀏覽器不提供video原生支持
// 檢查QuickTime 或 Flash可否頂上
}
視頻格式（Modernizr不支持webM格式的檢測）
if(Modernizr.video){
// 可以播放視頻了，但播放哪一個格式呢？
if(Modernizr.video.ogg){
// 嘗試在Ogg容器中使用Ogg Theora+Vorbis
}else if(Modernizr.video.h264){
// 嘗試在MP4容器中使用H.264視頻+AAC音頻
}
}
本地存儲
if(Modernizr.localstorage){
// window.localStorage存在
}else{
// 瀏覽器沒有提供本地存儲的原生支持
// 或許可以嘗試使用Gears或者其他的第三方解決方案
}
Web Workers
if(Modernizr.webworkers){
// window.Worker存在
}else{
// 瀏覽器沒有提供web worker的原生支持
// 也許可以嘗試使用Gears或其他第三方解決方案
}
離線web應用
if(Modernizr.applicationcache){
// window.applicationCache 存在
}else{
// 瀏覽器沒有提供原生的離線支持
// 也許可以嘗試使用Gears或者其他第三方解決方案
}
地理位置
if(Modernizr.geolocation){
// 讓我們找出你在哪？
}else{
// 瀏覽器沒有提供原生的地理位置支持
// 也許可以嘗試使用Gears或者其他第三方解決方案
}
輸入框類型（只舉一個例子）
if(!Modernizr.inputtypes.date){
// 瀏覽器沒有提供<input type="date">原生支持
// 也許你需要自己用Dojo或JqueryUI來構造一個類似的控件
}
佔位文本
if(Modernizr.input.placeholder){
// 也許你已經看到佔位文本了
}else{
// 佔位文本還不被支持，退而使用腳本解決方案
}
表單自動聚焦
if(Modernizr.input.autofocus){
// autofoucs 可以工作
}else{
// 瀏覽器不支持autofocus，退而採用腳本解決方案
}
微數據（暫不支持）
四、explorercanvas的使用方法（IE 8及以下不支持canvas的情況下使用explorercanvas類庫）
在<head>標籤中使用，如：
<head>
<meta charset="utf-8">
<title>html5</title>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>