HTML5是一些新的獨立特性的集合，因此我們不能檢測瀏覽器是否支持“HTML5”,但是我們可以分別檢測瀏覽器是否支持諸如“畫布(canvas)”、“視頻(video)”、“地理位置(geolocation)”等特性
簡介
做web前段開發人員已經習慣了處理多瀏覽器兼容(如IE、firefox、chrome)、多瀏覽器版本兼容(Ie6、ie7、ie8、ie9)，我們需呀從js和css上考慮讓它如何兼容，如何一致；HTML5也一樣，只是它更廣泛的被瀏覽器開發商接受並兼容，而且效果良好；但是這里仍舊有一個問題，就是“有些老的瀏覽器不支持” :(；你把html5用的爐火純青，忽然來個ie6用戶；所以我們需要對瀏覽器對html5的支持做一定的檢測，從而給用戶以有好提示；
怎么檢測
當瀏覽器在渲染web頁面的時候會構造一個文檔對象模型(DOM)，通過它來表示頁面上的HTML元素，任何一個tag都會被表示為一個對象；當然也有windwos和document這些不和特定頁面元素綁定在一起的全局對象；
所有的dom對象都共享一些屬性，但是有些對象會擁有特定的屬性。在支持HTML5特性的瀏覽器中，特性相關的dom對象就會有特定的屬性。通過這些特定的屬性，我們可以快速的檢測出那些html5特性是被支持的。比如常見的四種方法：
1.檢測全局對象(如window,navigator)是否擁有特定的屬性。比如檢測地理位置特性
2.創建一個元素，然后檢測該元素的dom對象是否擁有特定的屬性。比如檢測畫布特性
3.創建一個元素，然后檢測這個元素dom對象是否擁有特定的方法，調用這個方法，並檢測返回值。比如檢測支持的視頻格式
4.創建一個元素，給這個元素的dom對象設定特定的屬性值，然后檢測瀏覽器是否保留了該屬性值
檢測插件(Modernizr)
Moderniz是一個開源的js類庫，用於檢測瀏覽器是否支持html5及css3特性；在頁面引用后，會創建對應的全局對象，並開放 對應特性 是否支持的屬性，我們可以直接進行訪問對應屬性，就可以知道是否支持某特性了.
畫布(canvas)
在網頁中canvas就是一塊矩形區域，在這個區域里，我們可以畫任何內容，html5標准中定義了一系列的canvas的api，用於繪制簡單圖形、定義路徑、創建漸變、應用圖像變換等。
檢測canvas api，可以通過創建canvas元素，判斷其dom對象是否有getContext()方法；
//Canvas function supportCanvas() { return !!document.createElement("canvas").getContext; }
Modernizr.canvas
畫布文本(Canvas Text)
瀏覽器支持canvas api但不一定支持canvas text api，因為canvas api一直都在不斷完善中，cavas text(繪制文本)后來才被納入規范；既然如此，支持canvas text api必須要支持canvas api(見上)，如果李蘭奇支持canvas api，那么在獲得canvas繪圖上下文后，可以判斷是否有filltext方法，如果存在這個方法，則可以斷定瀏覽器支持canvas text api.
//Canvas Text function supportCanvasText() { if (!supportCanvas) { return false; } var canvas = document.createElement("canvas"); //獲取繪圖上下文 var context = canvas.getContext("2d"); //是否有fillText方法 return typeof context.fillText == "function"; }
Modernizr.canvastext
視頻(Video)
html5標准中定義了一個新元素video，用來將視頻簽入到web頁面中；之前如果想再web頁面中嵌入視頻，只能使用apple的quick time或者adobe flash播放器這些插件；video元素的可用性不需要任何腳本檢測；我們可以為它指定多個視頻格式的文件來進行播放，不支持html5 video的瀏覽器會忽略video標簽，在這種情況下我們可以指定用第三方插件來播放視頻，當然這只是處理web頁面視頻的最好解決方案；如果你的確要做檢測，當然是可以的。和canvas類似，創建一個video節點，判斷dom對象是否有某個屬性，這里使用canPlayType
//test video function testVideo() { var isSupport = supportVideo(); alert(isSupport ? "support video" : "do not support video"); //alert(Modernizr.video ? "support video" : "do not support video"); }
Modernizr.video
視頻格式(Video Formats)
視頻編碼算法迥異，所以目前各瀏覽器還未達成一致，使用統一的視頻編碼算法；但是好在這種算法已經縮減到兩周算法上：一種是safari和iphone的編碼算法；另一種是諸如chrome和mozilla firefox這類開源瀏覽器的編碼算法；所以做視頻格式支持檢測，要分別判斷這兩種；還有一種WebM，它是一種新的開源視頻編碼格式，會在Chrome，firefox和opera的下一個版本的到支持，所以我們也檢測咯；
要檢測瀏覽器是否支持某視頻格式，當然必須支持video；先創建video節點，然后調用dom對象的canPlayType()方法，但是這個方法返回的不是一個bool值，因為視頻格式非常復雜，所以這個方法會返回一個字符串，分別為：
probably:表示瀏覽器充分把握可以播放此格式
maybe：表示瀏覽器有可能可以播放此格式
“”(空字符串)：表示瀏覽器無法播放此格式
mp4:
//mp4 function support_h264BaseLine_VideoFormats() { if (!supportVideo()) { return false; } var v = document.createElement("video"); return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'") }
Modernizr.video.h264
ogg:
//ogg function support_ogg_theora_VideoFromats() { if (!supportVideo()) { return false; } var v = document.createElement("video"); return v.canPlayType("video/ogg;codecs='theora,vorbis'") }
Modernizr.video.ogg
web M:
//web m function support_webM_VideoFromats() { if (!supportVideo()) { return false; } var v = document.createElement("video"); return v.canPlayType("video/webm;codecs='vp8,vorbis'") }
本地存儲(Local Storage)
HTML5本地存儲允許網站把信息存儲到本地的計算機上，以便在需要時獲取。這和cookie類似，但cookie是有大小先知道的，而且每次請求一個新頁面時，cookie就會被發送回服務器；而html5本地存儲將信息存儲到用戶計算機上，網站可以再頁面加載完成后通過js獲取；檢測瀏覽器是否支持本地存儲可以通過判斷window對象是否有localStorage屬性
//Local Storage function supportLocalStorage() { return ('localStorage' in window) && window['localStorage'] != null; }
Modernizr.localstorage
Web Workers
Web Workers提供了一種標准的方式讓瀏覽器能夠在后台運行js，通過web worker，可以創建多個“線程”並讓他們同時執行；
//web workers function supportWebWorkers() { return window.Worker; }
Modernizr.webworkers
離線web應用
html5支持離線web應用，即斷開網絡后可以繼續訪問web應用程序；在第一次訪問具備離線訪問的web應用時，web服務器會告訴瀏覽器哪些文件是保證離線正常工作必須得，一旦瀏覽器下載了這些必須文件，下次就可以在沒有網絡的情況下正常使用應用；等下次用戶重新上線的時候，所有改動都會上傳到遠程的web服務器；檢測瀏覽器是否支持離線應用，可以通過判斷window對象是否有applicationCache屬性；
//offline function supportOffLine() { return !!window.applicationCache; }
Modernizr.applicationcache
地理位置(Geolocation)
瀏覽器在實現對html5新特性支持的同時，也紛紛加入了對地理位置特性的支持。嚴格的說，地理位置特性並不屬於html5標准的一部分，它由地理位置工作組(Geolocation Working Group)負責制定標准，這個工作組和html5工作組沒關系；地理位置api的使用場景非常廣泛，尤其在移動設備上；檢測瀏覽器是否支持地理位置api，可以判斷navigator是否有geolocation屬性.
//geolocation function supportGeolocation() { return !!navigator.geolocation; }
Modernizr.geolocation
Code
View Code
<!DOCTYPE html>
<head>
<title></title>
<script src="modernizr-2.5.3.js" type="text/javascript"></script>
<script type="text/javascript">
//Canvas
function supportCanvas() {
return !!document.createElement("canvas").getContext;
}
//Canvas Text
function supportCanvasText() {
if (!supportCanvas) {
return false;
}
var canvas = document.createElement("canvas");
//獲取繪圖上下文
var context = canvas.getContext("2d");
//是否有fillText方法
return typeof context.fillText == "function";
}
//Video
function supportVideo() {
return !!document.createElement("video").canPlayType;
}
//video formats h264
//mp4
function support_h264BaseLine_VideoFormats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'")
}
//ogg
function support_ogg_theora_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/ogg;codecs='theora,vorbis'")
}
//web m
function support_webM_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/webm;codecs='vp8,vorbis'")
}
//Local Storage
function supportLocalStorage() {
return ('localStorage' in window) && window['localStorage'] != null;
}
//web workers
function supportWebWorkers() {
return window.Worker;
}
//offline
function supportOffLine() {
return !!window.applicationCache;
}
//geolocation
function supportGeolocation() {
return !!navigator.geolocation;
}
</script>
</head>
<body>
<button onclick="testCanvas()">Test Canvas</button><br />
<button onclick="testCanvasText()">Test Canvas Text</button><br />
<button onclick="testVideo()">Test Video</button><br />
<button onclick="testVideoFormats()">Test Video Format</button><br />
<button onclick="testLocalStorage()">Test Local Storage</button><br />
<button onclick="testWebWorkers()">Test Web Workers</button><br />
<button onclick="testOffLine()">Test Offline app</button><br />
<button onclick="testGeolocation()">Test geolocation</button><br />
</body>
</html>
<script type="text/javascript">
//test canvas
function testCanvas()
{
var isSupport = supportCanvas();
alert(isSupport ? "support canvas" : "do not support canvas");
//alert(Modernizr.canvas ? "support canvas" : "do not support canvas");
}
//test canvastext
function testCanvasText() {
var isSupport = supportCanvasText();
//alert(isSupport ? "support canvas text" : "do not support canvas text");
alert(Modernizr.canvastext ? "support canvas text" : "do not support canvas text");
}
//test video
function testVideo() {
var isSupport = supportVideo();
alert(isSupport ? "support video" : "do not support video");
//alert(Modernizr.video ? "support video" : "do not support video");
}
//test video formats
function testVideoFormats() {
//mp4 test
var isSupport = support_h264BaseLine_VideoFormats();
alert(isSupport ? "support mp4 video " : "do not support mp4 video");
//ogg test
isSupport = support_ogg_theora_VideoFromats();
alert(isSupport ? "support ogg video " : "do not support ogg video");
//webm test
isSupport = support_webM_VideoFromats();
alert(isSupport ? "support webm video " : "do not support webm video");
/*
if (Modernizr.video) {
alert(Modernizr.video.ogg ? "support ogg video " : "do not support ogg video");
alert(Modernizr.video.h264 ? "support mp4 video " : "do not support mp4 video");
}
*/
}
//local storage
function testLocalStorage() {
var isSupport = supportLocalStorage();
alert(isSupport ? "support local storage" : "do not support local storage");
//alert(Modernizr.localstorage ? "support local storage" : "do not local storage");
}
//web workers
function testWebWorkers() {
var isSupport = supportWebWorkers();
alert(isSupport ? "support web workers" : "do not support web workers");
//alert(Modernizr.webworkers ? "support web workers" : "do not support web workers");
}
//off line
function testOffLine() {
var isSupport = supportOffLine();
alert(isSupport ? "support offline" : "do not support offline");
//alert(Modernizr.applicationcache ? "support offline" : "do not support offline");
}
//geolocation
function testGeolocation() {
var isSupport = supportGeolocation();
alert(isSupport ? "support geolocation" : "do not support geolocation");
//alert(Modernizr.geolocation ? "support geolocation" : "do not support geolocation");
}
</script>