如何在 HTML 文档中包含 Modernizr?


Modernizr 提供了一种简单的方法来检测任何新功能,以便您可以采取相应的措施。例如,如果浏览器不支持视频功能,您可能希望显示一个简单的页面。

您可以根据功能的可用性创建 CSS 规则,如果浏览器不支持新功能,这些规则将自动应用于网页。

Modernizr 是一个小型 JavaScript 库,用于检测下一代 Web 技术的原生实现的可用性。HTML5 和 CSS3 引入了许多新功能,但与此同时,许多浏览器不支持这些新功能。

让我们进入文章,进一步讨论如何在 HTML 文档中包含 Modernizr。

什么是 Modernizr?

Modernizr 是一小段 JavaScript 代码,它会自动检测用户浏览器中下一代 Web 技术的可用性。Modernizr 使用特性检测来根据用户浏览器实际的功能轻松定制用户体验,而不是基于“UA嗅探”来列出整个浏览器范围的黑名单。

有了 Modernizr 提供的这些知识,您可以利用这些新功能在能够渲染或使用它们的浏览器中,同时仍然拥有简单可靠的方法来控制无法使用的浏览器的状况。它是一组超快速的测试(或者我们喜欢称之为“检测”)集合,它们在您的网页加载时运行,然后您可以使用结果来根据用户的喜好定制体验。

一段名为 Modernizr 的简单 JavaScript 代码可以自动确定用户的浏览器是否支持下一代 Web 技术。Modernizr 使用特性检测来简化根据用户浏览器实际功能定制用户体验的过程,而不是基于“UA 嗅探”的整个浏览器类别的黑名单。

有了 Modernizr 提供的信息,您可以在能够显示或使用这些新功能的浏览器中利用这些新功能,同时仍然拥有快速可靠的方法来控制无法使用的浏览器的状况。它是一组超快速的测试(或我们称之为“检测”),在您的网页加载时运行。然后,您可以使用结果来定制您的体验。

语法

在开始使用 Modernizr 之前,您需要按照如下所示在 HTML 页面的头部包含其 JavaScript 库。

<script src="modernizr.min.js" type="text/javascript"></script>

示例

以下是通过 JavaScript 检测特定功能的程序:

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/3.1.1/modernizr.custom.min.js
"></script>
</head>
<body>
   <p>HTML5 Modernizr Browser Check</p>
   <script>
      if (Modernizr.video) {
         alert("HTML5 Video is supported in your browser");
      }
      else {
         alert("HTML5 Video is not supported in your browser");
      }
   </script>
</body>
</html>

为什么需要 Modernizr?

每个 Web 开发人员都会遇到浏览器和设备的差异。这主要是因为功能集不同;虽然我们仍然需要支持旧版浏览器,但最常用浏览器的最新版本能够实现一些早期浏览器无法实现的出色功能。

使用 Modernizr 在支持它们的浏览器中利用最新功能,创建分层体验,而不会放弃那些不太幸运的用户。

更新于:2023年10月11日

1K+ 浏览量

开启您的 职业生涯

完成课程获得认证

开始学习
广告