HTML5, CSS3 以及其他相關技術例如 Canvas、WebSocket 等等將 Web 應用開發帶到了一個新的高度。該技術通過組合 HTML、CSS 和 JavaScript 可以開發出桌面應用具有的效果。盡管 HTML5 承諾很多，但現實中對 HTML5 支持的瀏覽器以及 HTML5 標準本身的完善程度都還沒有到一個很成熟的程度?，F在完全不擔心瀏覽器支持是不現實的，還需要時間，因此當我們決定要采用 HTML5 技術開發 Web 應用的時候，我們需要對瀏覽器所支持的特性進行檢測。
而 Modernizr 就可以幫助你完成對瀏覽器所支持 HTML5 特性的檢查。
下面代碼檢測瀏覽器是否支持 Canvas：
代碼如下:<script>下面代碼檢測瀏覽器是否支持本地存儲：
代碼如下:上面的兩個例子中我們可以很直觀的對瀏覽器的特性進行檢查以確保我們在對應的瀏覽器上應用的功能能否正常運作。
而使用 Modernizr 的好處還在于你不需要這樣一項項去檢查，還有更簡單的方法，下面我們開始：
當我第一次聽到 Moderizr 這個項目時，我以為這是一個讓一些老的瀏覽器能支持 HTML5 的 JS 庫，事實上不是，它主要是檢測的功能。
Modernizr 可以通過網址 http://modernizr.com 來訪問，該網站同時還提供一個定制腳本的功能，你可以確定你需要檢測什么特性，并依此來生成相應的 JS 文件，這樣可以減少不必要的 JS 代碼。
一旦下載了 Modernizr 的 JS 文件后，就可以通過 <script> 標簽引入到網頁中。
代碼如下:<script src="Scripts/Modernizr.js" type="text/javascript"></script>檢測 HTML 元素
一旦我們在頁面上引入了 Modernizr 后就可以立即使用，我們可以在 <html> 元素中聲明不同的 CSS 類，這些類定義了所需要支持或者不支持的特性，不支持的特性其類名一般是 no-FeatureName，例如 no-flexbox。下面是一個在 chrome 上可運行的例子：
代碼如下:鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
