Modernizr

来源：互联网发布：光纤网络哪家好编辑：程序博客网时间：2024/06/04 16:40

什么是Modernizr？
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。一整套测试的执行时间仅需几微秒。此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。
当使用 Modernizr 检测 CSS3 支持情况时，你无需具备任何 JavaScript 的知识。你仅需在网页中插入文件，它随即根据浏览器的功能情况在页面的<html>标签上添加一组类。相应类的名称已经符合标准化的要求并浅显易懂。例如，如果浏览器支持 box-shadow 属性，则需要添加相应的 boxshadow 类；否则，添加一个 no-boxshadow类即可。你所要做的一切只不过是创建一个使用这些类的式样表，以便为相应浏览器提供合适的式样。
Modernizr 可轻松实现 JavaScript 解决方案，即人们熟知的 polyfills——它模拟HTML5 相关功能和技术，如地理定位。然而，你的确需要对 JavaScript 有基本了解以便使用这些功能和技术。术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla（即美国人熟知的填泥料）。这里，polyfill 用来填补浏览器功能上的漏洞。有时，Modernizr 可无缝地执行这项任务。但本质上，这只是一种修补工作，所以，不能依赖它产生无漏洞浏览器所实现的完全相同结果。
下载 Modernizr
与其它 JavaScript 库相同的是，Modernizr 可提供 development 和 production 版本。与大多数库相比，唯一的不同之处是，空格和注释已经从 production 版本中删除了，这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素，这样能够显著降低下载量。在很多情况下，production 版本可以缩小为development版本大小的二十分之一。
当使用 Modernizr 进行测试时，我建议你下载 development 版本。一旦你掌握了它是如何运作的以及它的能力，你就可以下载一个自定义 production 版本以便在你的网站进行部署。
本教程的示例文件包含的是 Modernizr的development 2.0.6 版本，但是我建议你从 Modernizr 站点上用最新更新的版本替代它。
下载本文附带的示例文件（使用modernizr.zip）并且在 Dreamweaver 站点内将它们解压到一个方便的位置，或者是为本教程创建一个新站点。
访问 Moderniz 网站，其地址为 http://www.modernizr.com/ 。
在 Download Modernizr 2 部分中，单击 Development 按钮（参见图1）。Modernizr 的 development 版本就会直接在你的浏览器窗口上打开。
图1. 选中development版本以便进行Modernizr测试
注：如果你错误地单击了主导航菜单中的 Download 链接，那么你将看到大量的复选框出现，要求你去选择你想要的工具。这是为定制的 production 版本所设置。单击面板顶部的 Development 版本的链接，或者单击浏览器的 Back 按钮返回主页并选中图1所示的 Development 按钮。
在浏览器的主菜单上，选中 Save Page As，并在示例文件的js文件夹里将它另存为 modernizr.js。如果有必要的话可以替换已有的文件。
使用 Modernizr 检测 CSS 功能
如前所述，Modernizr 并没有尝试在旧版本的浏览器中添加新的功能，但是它允许你按照你的风格去弥补那些缺失的功能。为了展示这是如何运作的，示例文件中包含了一个叫做 css_support_begin.html 的页面。如果你在新式浏览器中加载这个页面，

阅读全文

0 0