作者：这是关于有用库的一系列文章的第三篇，所有网页开发者都应该将这些库纳入他们的工具箱。本文的目的是向您展示这些库的功能，并帮助您充分利用它们。本文的第三篇专门介绍 Modernizr 库。
简介
Modernizr 是一个最初由 Faruk Ateş 编写的库。
它是以现代方式构建跨浏览器网站或应用程序的关键库之一。该库的核心是称为 渐进增强和优雅降级 的网页设计模式。这种设计模式不需要 Modernizr，但 Modernizr 可以让事情变得更容易。它检测下一代网页技术（如 HTML5 或 CSS3）的原生实现的可用性，并允许您相应地调整您的应用程序，这比尝试一些难看的用户代理嗅探要好得多。
基本用法
使用此库非常简单：下载它，将其链接到您的页面 - 就完成了！
Modernizr 会自动将一些 CSS 类添加到根 html 元素。例如，如果您想测试 Web Sockets 支持，如果浏览器支持该功能，它会将 websockets 类添加到 html 元素，否则它会添加 no-websockets 类。它会对 JavaScript 做同样的事情，通过添加一个全局变量 Modernizr.websocket，该变量的值为布尔值。
让我们看一个简单的例子：用 RGBa 颜色做一些事情。
首先：下载 Modernizr 的自定义版本
其次：将其链接到您的文档
<!DOCTYPE html>
<!--
The "no-js" class is here as a fallback.
If Modernizr is not running, you'll know
something is wrong and you will be able to act
accordingly. In contrast, if everything goes well,
Modernizr will remove that special class.
-->
<html class="no-js">
<head>
<meta charset="utf-8">
<title>I want to do stuff with RGBa</title>
<script src="modernizr.js"></script>
</head>
<body>
...
</body>
</html>
第三：使用它
使用 CSS
.rgba div {
/* Do things with CSS for browsers that support RGBa colors */
}
.no-rgba div {
/* Do things with CSS for browsers that DO NOT support RGBa colors */
}
使用 JavaScript
if(Modernizr.rgba) {
// Do things with JS for browsers that support RGBa colors
} else {
// Do things with JS for browsers that DO NOT support RGBa colors
}
让我们看看这个简单的例子
%CODEtoolbox-3-1%
高级用法
当您必须处理异构环境（例如移动浏览器）时，基本用法已经很好了，但还有更多。
条件加载
Modernizr 提供了一种方便的方法来进行条件加载。实际上，YepNope 库 是 Modernizr 项目的独立分支。因此，如果您愿意，您可以将 YepNope 直接捆绑在 Modernizr 中。如果您想要根据特定浏览器的能力加载基于 polyfill 的文件，它非常完美。
Modernizr.load({
test: Modernizr.indexeddb,
nope: "indexeddb-polyfill.js"
});
这是一个非常强大的工具：不要犹豫 阅读文档。请注意，Modernizr 团队维护着一个 非常准确的 polyfill 列表。您可以随意使用您需要的任何东西（当然要谨慎）。
自定义测试
Modernizr 带有一组 44 个针对主流技术的测试。如果您需要测试其他一些技术，Modernizr 提供 一个 API 来构建和插入您自己的测试。
// Let's test the native JSON support ourselves
Modernizr.addTest('json', function(){
return window.JSON
&& window.JSON.parse
&& typeof window.JSON.parse === 'function'
&& window.JSON.stringify
&& typeof window.JSON.stringify === 'function';
});
假设上述测试通过，现在 HTML 元素上将有一个 json 类，并且 Modernizr.json 将为 true。否则，HTML 元素上将有一个 no-json 类，并且 Modernizr.json 将为 false。
处理 CSS 前缀
CSS 前缀是一个非常敏感的话题。Modernizr 提供跨浏览器的代码来处理这个问题。Modernizr 提供了一个非常有用的工具来处理这个问题：Modernizr.prefixed()。此方法适用于 CSS 属性（在 CSS OM 中使用驼峰式命名法）以及 DOM 属性。
例如，Modernizr.prefixed("transition") 在 Firefox 中将返回“MozTransition”，但在 Safari 和 Chrome 中将返回“WebkitTransition”。
测试媒体查询
目前，在任何浏览器中都没有简单的方法从 JS 中测试媒体查询。为了帮助解决这个问题，Modernizr 有一个特殊的工具：Modernizr.mq()。此方法将测试您选择的媒体查询，并相应地返回 true 或 false。
if(Modernizr.mq("screen and (max-width: 400px)")) {
// Do some stuff for small screens
}
限制和注意事项
这个库是一个很棒的工具，但它不是魔法。您应该谨慎使用它，不要忘记其他技术来处理不可预测的行为。例如，不要忘记在足够的情况下依赖 CSS 级联。
以下示例是 Modernizr 的极端误用
div {
color : white;
}
.rgba div {
background : rgba(0,0,0,.8);
}
.no-rgba div {
background : #333;
}
如果由于某种原因 Modernizr 没有执行，您的文本将无法阅读（白色文本在白色背景上）。在这种特定情况下，您最好执行以下操作（顺便说一下，它也更容易阅读和维护）
div {
color : white;
background : #333;
background : rgba(0,0,0,.8);
}
因此，在使用此库时，不要盲目，花点时间思考如果 Modernizr 不可用会发生什么。在很多情况下，您已经有了现有的回退，不要忘记使用它们。
结论
当您必须构建大型跨浏览器内容时，Modernizr 是最实用的工具，从最古老的 Internet Explorer 6 到最新的 Firefox Nightly。一旦您掌握了它，您就可以为您的网站和应用程序添加一些魔法。然而，与所有强大的工具一样，需要花费一些时间才能熟悉它，并明智地利用它的全部潜力。但是，Modernizr 绝对值得付出努力。
关于 Jeremie Patonnier
Jeremie 是 Mozilla 开发者网络的长期贡献者/员工，从 2000 年开始担任专业网页开发者。他倡导网页标准，编写文档，并创建各种关于网页技术的内容，以期让所有人都能访问这些内容。
16 条评论