检测浏览器对HTML5和CSS3支持度的方法_html5教程技巧

 HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的，还需要时间，因此当我们决定要采用 HTML5 技术开发 Web 应用的时候，我们需要对浏览器所支持的特性进行检测。

而 Modernizr 就可以帮助你完成对浏览器所支持 HTML5 特性的检查。

下面代码检测浏览器是否支持 Canvas：
 

复制代码

代码如下:

<script><br> window.onload = function () {<br> if (canvasSupported()) {<br> alert('canvas supported');<br> }<br> };<br> <br> function canvasSupported() {<br> var canvas = document.createElement('canvas');<br> return (canvas.getContext && canvas.getContext('2d'));<br> }<br></script>

下面代码检测浏览器是否支持本地存储：
 

复制代码

代码如下:

<script><br> window.onload = function () {<br> if (localStorageSupported()) {<br> alert('local storage supported');<br> }<br> };<br> <br> function localStorageSupported() {<br> try {<br> return ('localStorage' in window && window['localStorage'] != null);<br> }<br> catch(e) {}<br> return false;<br> }<br></script>

上面的两个例子中我们可以很直观的对浏览器的特性进行检查以确保我们在对应的浏览器上应用的功能能否正常运作。

而使用 Modernizr 的好处还在于你不需要这样一项项去检查，还有更简单的方法，下面我们开始：

当我第一次听到 Moderizr 这个项目时，我以为这是一个让一些老的浏览器能支持 HTML5 的 JS 库，事实上不是，它主要是检测的功能。

Modernizr 可以通过网址 http://modernizr.com 来访问，该网站同时还提供一个定制脚本的功能，你可以确定你需要检测什么特性，并依此来生成相应的 JS 文件，这样可以减少不必要的 JS 代码。 

 一旦下载了 Modernizr 的 JS 文件后，就可以通过 <script> 标签引入到网页中。<br> <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode11'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode11"><script src="Scripts/Modernizr.js" type="text/javascript"></script>