使用Modernizr检测HTML5功能

过去，我写过一篇 文章，讨论了在编写 Web 应用程序/网站时，使用 特性检测 而不是浏览器检测。像 jQuery 这样的框架会为你完成这项工作，你只需要使用它们即可。还有像 Modernizr 这样的框架，专门用于测试你正在使用的浏览器，以检测它是否支持即将推出的特性，例如 HTML5 或 CSS3。

Modernizr 是什么？

摘自 Modernizr 网站：“Modernizr 是一个小型而简单的 JavaScript 库，它可以帮助你利用新兴的网络技术（CSS3、HTML 5），同时仍然可以很好地控制那些尚未支持这些新技术的旧浏览器。”

如何使用 Modernizr？

使用 Modernizr 非常简单。首先，从 Modernizr 网站 下载库。然后，将下载的 JavaScript 文件添加到你的网站，并使用 Modernizr API。例如，以下是如何检测浏览器中是否可用 HTML5 Canvas

// In your BLOCKED SCRIPT
if (Modernizr.canvas) {
   var c = document.createElement('canvas');
   var context = c.getContext('2d');    
   // Do your work 
}

这里有一个检测搜索输入类型的例子

<input type="search" name="searchBox" id="searchBox">
 
<script>  
if (!Modernizr.inputtypes.search){
  // if no native support, create your own search box
  createSearchBox(document.getElementById('searchBox'));
}
</script>

这里有一个检查 SVG 的例子

if (Modernizr.svg)
{
    // SVG is supported by your browser
} else 
{
    // SVG is not supported
}

正如你所见，该 API 非常易于使用和学习。有关 API 的更多信息，你可以访问 Modernizr 文档。

摘要

特性检测 可以帮助你创建更稳定的 Web 应用程序/网站。Modernizr 是一个 JavaScript 库，可以帮助你检测即将推出的特性，例如 HTML5 或 CSS3。它非常易于使用，可以从 这里 下载。