4種基本技術可以用於檢測浏覽器是否支持某種Html5特性，從簡單到復雜的順序：
1、檢測全局對象（window或navigator）是否擁有特定的屬性。
如果浏覽器支持地理位置API的話，全局的navigator對象上會有一個名為geolocation的屬性，反之，navigator對象上該屬性的值為undefined:
JavaScript Code復制內容到剪貼板
- function supports_geolocation(){
- return !!navigator.geolocation;
- }
如果不想寫這個方法的話，可以使用modernizr庫提供的方法檢測浏覽器是否支持地理位置API：
JavaScript Code復制內容到剪貼板
- if(Modernizr.geolocation){ do something}
- else{ do something }
2、創建一個元素，然後檢測該元素的DOM對象是否擁有特定的屬性。以檢測
畫布特性為例。
JavaScript Code復制內容到剪貼板
- function supports_canvas(){
- return !!document.createElement_x_x('canvas').getContext;
- }
return !!document.createElement_x_x('canvas').getContext;這一句是創建一個虛擬的<canvas>元素，這個元素永遠不會附加到頁面上，因此對於用戶來說它永遠是不可見的。緊接著測試該元素是否擁有getContext()方法，這個方法只有當浏覽器支持canvasAPI時才會存在，最後用雙重否定!!來強制這個檢測方法返回一個布爾值
如果不想寫這個方法的話，可以使用modernizr庫提供的方法檢測浏覽器是否支持canvas API：
JavaScript Code復制內容到剪貼板
- if(Modernizr.canvas){ do something}
- else{ do something }
3、創建一個元素，然後檢測該元素的DOM對象是否擁有特定的方法，同時調用這個方法並檢查它的返回值。以檢測支持視頻格式為例。
JavaScript Code復制內容到剪貼板
- function supports_video(){
- return !!document.createElement_x_x('video').canPlayType;
- }
如果浏覽器支持Html5 video,被創建<video>元素對應的DOM對象會有一個名為canPlayType()的方法，反之，該對象只會擁有一些所有元素都有的公共屬性。
如果不想寫這個方法的話，可以使用modernizr庫提供的方法檢測浏覽器是否支持video API：
JavaScript Code復制內容到剪貼板
- if(Modernizr.video){ do something}
- else{ do something }
4、創建一個元素，給這個元素的DOM對象設定特定的屬性值，然後檢查浏覽器是否保留了該屬性值。以檢測支持的<input>類型為例。
首先創建一個虛擬的<input>元素：var i=document.createElement_x_x("input");
<input>元素默認為文本類型，接下來將元素的類型設置成要檢測的類型： i.setAttribute("type","color");
如果浏覽器支持次特定的輸入框類型，那麼設置的type值會被保留，反之，依然為文本類型。
JavaScript Code復制內容到剪貼板
- return i.type!=="text";
- if(!Modernizr.inputtypes.date){
- //浏覽器有沒有提供，type="date">原生支持
- }