Modernizr

因此，在本文中，我们将专门讨论此JavaScript库。

它是什么？

首先，让我们回答一个基本问题：

什么是Modernizr？

基于官方网站，Modernizr是“一个JavaScript库，可在用户浏览器中检测HTML5和CSS3功能。”

尽管HTML5和CSS3很棒，但是正如我们现在所知道的，它们具有的许多新功能在旧浏览器中并不太适用 。 Modernizr通过测试用户的浏览器是否支持特定功能来帮助解决此问题。 如果该功能

“不受支持”

，那么我们可以提供适当的脚本或功能来模仿其缺??少的功能。

设置Modernizr

在Modernizr的官方网站上，我们会发现两个选项，下载文件，

开发

和

生产

的版本。

开发版本是完整且未压缩的版本，包含所有主要功能测试； 而在正式版中，我们可以选择仅需要的功能测试。

如您所见， 下载页面中提供了许多功能测试选项。 在此示例中，我们将选择所有主要功能测试。 生成并获取代码。 然后，将文件插入部分中。

最后，我们还需要在标记中添加no-js类。

如果用户的浏览器在未启用JavaScript的情况下运行，则该类是必需的，我们可以通过该类添加适当的备用 。 如果是这样，Modernizr将仅用js活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看替换此类。

就是这样，现在我们已经准备就绪，可以使用Modernizr。

与班级一起工作

现在，如果我们在网页上执行

Inspect Element

，您将看到标签中添加了许多CSS类。 这些类是从Modernizr生成的，并且会根据浏览器的功能而有所不同。

例如，如果浏览器不支持CSS3动画 ，则Modernizr将生成no-cssanimations类。

但是，当这样做时，它将删除no-前缀，并简单地变为cssanimations 。

让我们看一下下面的代码片段；

上面的代码取自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浏览器支持 – Adob??e.com

翻译自: https://www.hongkiat.com/blog/modernizr/

26539217

《Modernizr》来自互联网同行内容，若有侵权，请联系我们删除！