数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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 在支持这些功能的浏览器中利用最新功能，创建分层体验，而不会放弃那些不太幸运的用户。
1K+ 次查看
