如何在 HTML 文档中包含 Modernizr?

javascriptweb developmentfront end scripts

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>