因此，在本文中，我们将专门讨论此JavaScript库。
它是什么？
首先，让我们回答一个基本问题： 什么是Modernizr？
基于官方网站，Modernizr是“一个JavaScript库，可在用户浏览器中检测HTML5和CSS3功能。”
尽管HTML5和CSS3很棒，但是正如我们现在所知道的，它们具有的许多新功能在旧浏览器中并不太适用 。 Modernizr通过测试用户的浏览器是否支持特定功能来帮助解决此问题。 如果该功能“不受支持” ，那么我们可以提供适当的脚本或功能来模仿其缺少的功能。
设置Modernizr
在Modernizr的官方网站上，我们会发现两个选项，下载文件， 开发和生产的版本。
开发版本是完整且未压缩的版本，包含所有主要功能测试； 而在正式版中，我们可以选择仅需要的功能测试。
如您所见， 下载页面中提供了许多功能测试选项。 在此示例中，我们将选择所有主要功能测试。 生成并获取代码。 然后，将文件插入<head>部分中。
<script src="modernizr.js" type="text/javascript"></script> 最后，我们还需要在<html>标记中添加no-js类。
<html class="no-js"> 如果用户的浏览器在未启用JavaScript的情况下运行，则该类是必需的，我们可以通过该类添加适当的备用 。 如果是这样，Modernizr将仅用js替换此类。
就是这样，现在我们已经准备就绪，可以使用Modernizr。
与班级一起工作
现在，如果我们在网页上执行Inspect Element ，您将看到<html>标签中添加了许多CSS类。 这些类是从Modernizr生成的，并且会根据浏览器的功能而有所不同。
例如，如果浏览器不支持CSS3动画 ，则Modernizr将生成no-cssanimations类。
但是，当这样做时，它将删除no-前缀，并简单地变为cssanimations 。
让我们看一下下面的代码片段；
<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase
no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize
no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients
no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video
no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil
no-svgclippaths no-placeholder"> 上面的代码取自Internet Explorer 7，从生成的类中可以看出，该浏览器显然缺少许多良好的新功能，例如不支持CSS3 border-radius 。
因此，假设要用Internet Explorer 7中的圆角图像替换边界半径表示，则可以使用no-broderradius类。
.no-borderradius div {
/*-- do some hacks here --*/
}如果您想知道当前的浏览器能够在多大程度上处理新HTML5和CSS3技术，Modernizr提供了可以使用的测试套件。 访问此页面（ Modernizr测试服 ），您将立即看到输出。
浏览器功能测试
接下来，如上所述，使Modernizr能够轻松地检测或测试浏览器功能。 为了测试浏览器功能，我们可以使用以下语法：
Modernizr.featuretodetect假设我们要测试浏览器是否支持WebGL，我们可以编写；
if (Modernizr.webgl) {
} 我们也可以否定该语句，这样结果将返回相反的结果。 当浏览器不支持该功能时，它为true ；
if (!Modernizr.webgl) {
}或者，如果我们要根据结果测试运行不同的脚本，我们还可以如下扩展代码；
if (Modernizr.webgl) {
/* Script A */
} else {
/* Script B */
}上面的代码指出，如果浏览器支持WebGL，则脚本A将运行，如果不支持，则脚本B将运行。 这样，仅在满足条件且实际需要脚本时才加载脚本。
现代负载
我们将从Modernizr看的另一件事是Modernizr.load 。 Modernizr.load是基于Yepnope的条件资源（CSS和JS）加载器。 让我们看一下下面的代码；
Modernizr.load({
test: Modernizr.webgl,
yep : 'three.js', /* JavaScript 3D Library */
nope: 'jebgl.js' /* */
});与上一节类似，在上面的示例中，我们运行测试以查看用户的浏览器是否支持WebGL。 如果结果返回是的 （它支持WebGL的），那么我们将加载three.js所 ，但如果它返回没了 （它不支持WebGL的），那么我们将加载jebgl.js作为替代。
万一我们只需要一个条件来加载脚本，我们可以删除另一个不需要的条件。 以下示例显示了如何加载placeme.js ，如果用户的浏览器不支持placeholder属性，并且在支持时不加载任何内容。
Modernizr.load({
test: Modernizr.placeholder,
nope: 'placeme.js'
});如我们前面的讨论中所述，这种做法将避免不必要的下载位，从而确保用户具有最佳的加载性能-换句话说，我们仅在需要时才加载脚本。
有关Modernizr.load进一步高级实现，您可以参考其官方文档，也可以参考Yepnope文档的原始来源。
最终思想
Modernizr已经完成了艰苦的工作，并为我们节省了很多时间，因此在使用HTML5和CSS3时，尤其是当您需要填补新技术与新技术之间的空白时，没有理由不包括此JavaScript库。旧的浏览器。
进一步阅读
- 利用Modernizr充分利用HTML5和CSS3 –列表清单
- Modernizr文档 – Modernizr.com
- 使用Modernizr检测HTML5和CSS3浏览器支持 – Adobe.com
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
