Modernizr 检测浏览器功能支持情况的 JavaScript 库

发布于 2020-03-03 18:10:29 字数 7978 浏览 1415 评论 0

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。通过这个库我们可以检测不同的浏览器对于HTML5特性的支持情况。使用Modernizr类库和使用其他第三方类库的方法是一样的。

为什么使用 Modernizr

使用炫酷新颖的 web 技术是一件很有趣的事情，但你不得不面对落后的浏览器。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

工作原理

Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

Modernizr 于 2009 年 7 月由 FarukAte 推出，以统一、标准化的方式解决跨浏览器兼容性问题。今天 Modernizr 作为特征检测库是最受欢迎的 JavaScript 库之一，提供超过 270 个测试，并且正在全球 8.76% 的网站中使用（仅在美国就有 50 万个网站）。而不是依赖于使用“用户代理”嗅探的高度不可靠的浏览器检测方法，而Modernizr则基于特征检测。虽然浏览器检测的中心问题是“访问者使用的浏览器是什么？”功能检测围绕着这个问题，

对于特征检测，Modernizr 执行三个基本功能：

添加指示功能支持的类，可用于有条件地将 CSS 样式规则应用于不同的元素。
创建一个 JavaScript 对象，以检查或验证对浏览器中任何 HTML 或 CSS 功能的支持。
允许开发人员有条件地提供自定义 JS 脚本或 polyfill 来模仿缺少的功能。

重要的是要记住，使用 Modernizr 进行特征检测只能检测支持哪些功能。它无法为旧版浏览器中不受支持的功能提供功能。这是通过 polyfilling 实现的，我们将在本博客后面讨论。

Modernizr 介绍

Modernizr 是一个开源和紧凑的 JavaScript库，允许开发人员在跨浏览器兼容性方面为用户创建各种级别的体验。Modernizr帮助开发人员执行跨浏览器测试，以检查访问者的浏览器本身是否支持新一代 HTML5和CSS3功能，并为旧版浏览器提供专用的后备功能，这些浏览器因其功能支持不佳而臭名昭着。

Modernizr 与渐进增强的原理相结合，有助于逐层设计尖端网站，利用强大的现代Web技术，而不会丢弃仍在使用IE等旧版浏览器的用户。

设置 Modernizr 进行特征检测

1、下载项目文件

要使用 Modernizr 执行特征检测，您需要将 Modernizr.js 文件添加到项目中。这可以通过两种方式完成：

从网站下载

访问官方网站以构建和下载 JavaScript 文件。单击 添加检测 以根据项目需要手动选择所需的功能，或单击 开发构建 以重定向到构建页面，并预先选择所有测试/检测选项。单击 构建按钮 以下载文件。

使用 npm 和命令行

也可以使用节点包管理器或 npm 安装 Modernizr。你可以在这里安装 npm 。安装 npm 后，打开命令行并输入：

npm install -g modernizr

2、引入文件

现在将下载的Modernizr文件包含在页面部分中。

<script src="modernizr-custom.js"></script>

3、将 no-js 类添加到 <html> 标记中

<!DOCTYPE html>
<html class="no-js">
<head>
<script src="modernizr-custom.js"></script>
</head>

no-js 如果用户在浏览器中禁用了 JavaScript 或浏览器本身不支持 JavaScript，则此类是必要的后备。加载页面后，如果浏览器支持 JavaScript，则 Modernizr 会自动 no-js 将 js 类替换为对应的类以进行特征检测。

4、自动添加类

Modernizr 在根 <html> 元素上添加了几个 CSS 类。这些类是根据浏览器的功能（功能/无功能）添加的 - 为支持的功能添加了类，并为添加的类添加了 no- 不支持的功能的前缀。

例如如果浏览器支持 Flexbox，则 flexbox 该类将添加到 <html> 标记中。如果不支持， no-flexbox 则添加类。

Modernizr 为 IE9 中的特征检测测试添加了<html> 标记的类

<html class="js no-flexbox canvas canvastext no-webgl no-touch
geolocation postmessage no-websqldatabase no-indexeddb
hashchange no-history draganddrop no-websockets rgba
hsla multiplebgs backgroundsize no-borderimage borderradius
boxshadow no-textshadow opacity no-cssanimations no-csscolumns
no-cssgradients no-cssreflections csstransforms
no-csstransforms3d no-csstransitions fontface generatedcontent
video audio localstorage sessionstorage no-webworkers
no-applicationcache svg inlinesvg smil svgclippaths">

利用 Modernizr 进行 CSS 特征检测

Modernizr 将这些类添加到 <html> 标记中，以根据给定浏览器是否支持某个功能来检测 CSS 样式属性。具有 no- 前缀的类将自动应用于不支持这些相应功能的浏览器中。

例如如果 box-shadow 浏览器支持该属性，则 boxshadow Modernizr 类将添加到 <html> 标记中。如果不支持，则 no-boxshadow 添加 Modernizr 类。我们可以使用这两个 CSS 类来有效地定位所有浏览器，而不管它们对这个特定功能的支持。

本 .boxshadow 类可以用来风格 box-shadow 围绕一个 div 水平偏移和垂直的10px的，8像素的模糊，以及所有支持的浏览器和 15px 的蔓延抵消 .no_boxshadow 类可用于较厚的边框宽度，以弥补缺乏编写一个回退所有不受支持的浏览器的任何阴影。

.boxshadow #box {
  border: 2px solid black;
  -webkit-box-shadow: 10px 10px 8px 10px #888888;
  -moz-box-shadow: 10px 10px 8px 10px #888888;
}
.no-boxshadow #box {
  border: 5px solid black;
}

因此与使用 User-Agent 字符串编写大量代码来定位单个浏览器不同，使用 Modernizr 进行特征检测可以将任务简化为仅编码两个代码块，一个用于兼容的浏览器，另一个用于不兼容的浏览器。

CSS 线性渐变的另一个例子：

.no-cssgradients .header {
  background: url("image");
}
.cssgradients .header {
  background-image: url("image"), linear-gradient(red, blue);
}

避免类名冲突

由Modernizr创建的类可能会与您已添加到样式表中的预先存在的CSS类冲突，这是非常合理的。为了避免这种情况，建议在所有 Modernizr 类中添加一个类前缀，使它们完全唯一。例如，您可能已经在使用名为 boxshadow 的类，该类将与 Modernizr 使用相同名称创建的检测类冲突。您可以使用类前缀来轻松解决此问题。在您的配置中进行以下更改：

{"classPrefix": "foo-", "feature-detects": ["dom/boxshadow"]}

而不是

<html class="boxshadow">, modernizr will add <html class="foo-boxshadow">

阻止 Modernizr 将类添加到 HTML 标记

如果希望 Modernizr 不将其任何类添加到 HTML 标记，请在配置文件中将 enableClasses 设置为false。这仍然排除了 no-js 班级。为了防止这种情况，请将 enableJSClass 设置为false。

使用Modernizr 进行 JavaScript 特征检测

如前所述，Modernizr 不是试图使用不可靠且现已不存在的 User-Agent 字符串来检测用户的浏览器，而是依赖于功能检测。

Modernizr在页面加载期间在后台运行一系列基于 JavaScript 的检查或测试，以检测浏览器是否支持功能。如果支持某个功能，这些测试会返回布尔值 True ，如果不支持，则返回 False 。

使用这些布尔结果，它创建一个名为的 JavaScript 对象 Modernizr。我们可以访问此对象 Modernizr 的各种属性以进行特征检测 Modernizr.featureName。例如，Modernizr.video 如果浏览器支持视频元素，则返回 true 如果浏览器不支持，则返回 false。

以下是使用 JavaScript 使用 Modernizr 进行特征检测的语法：

if (Modernizr.feature) {
  /* Rules for browsers that support this feature*/
} else{
  /* fallback for browsers that do not support this feature*/
}

Modernizr 对象有助于验证对 CSS 和HTML 功能的支持。这是 Modernizr 使用 @supports 功能查询提供明显优于本机 CSS 功能检测的优势。我们可以使用 Modernizr 的这种功能为重要的 HTML5 元素编写必要的后备，如画布，视频，音频和文章，导航，页眉，页脚等语义元素。

下面的示例演示如何使用 JavaScript 测试 CSS 线性渐变，并为支持它的浏览器添加线性渐变类。

$(document).ready(function () {
  if (Modernizr.cssgradients) {
    $('#box').addClass('cssgradients');
  }
  if (Modernizr.cssgradients) {
    $('#box').addClass('no-cssgradients ');
  }
});

除了使用 JavaScript 进行功能检测以测试浏览器是否支持该特定 Web 技术之外，Modernizr 还可用于加载 polyfill/shims 以模仿浏览器缺少或不支持的功能。

什么是 Polyfills？

polyfill 是一种 JavaScript 代码，可以作为在旧版浏览器中模仿现代功能的后备，本机不支持此类功能。例如如果您想在自己的网站上嵌入视频，则可以使用 HTML5 <video> 标记。这与每个现代浏览器兼容。但是较旧的旧版浏览器（如Internet Explorer 8及其早期版本）不支持 <video> 标记。为了确保任何仍在使用这些浏览器的用户不会被排除在查看此类内容之外，我们会使用一种名为 Embed Video Player 的流行的polyfill。对于 Canvas，最受欢迎的 polyfill 是 FlashCanvas，用于 SVG - svgweb，用于音频 SoundJS 等。

使用 JavaScript 加载 Polyfill

如前所述，除了执行浏览器支持的 JavaScript 测试之外，Modernizr 还可用于有条件地加载 polyfill / shim 脚本，以在浏览器缺少功能支持时提供功能。这是通过使用 Modernizr.load() 方法实现的。

Modernizr.load

该 Modernizr.load 方法是一个基于非常流行的 yesnope.js 库的条件加载器，它根据特征检测测试的结果加载 JavaScript 文件。例如 modernizr.load 如果浏览器不支持，我们可以使用该方法测试对 flexbox 的支持的可用性并加载 polyfill。

如果浏览器支持 flexbox，flexlayout.css 则会加载该文件，但是如果缺少支持， matchHeight.js 则会加载 polyfill，这会模仿旧版浏览器中的 flexbox 功能。

Modernizr.load({
  test: Modernizr.flexbox,yep : 'flexlayout.css',
  nope: 'matchHeight.js'
});

Modernizr.load() 将定义要素的属性作为参数，并执行测试以检查其支持。如果支持该属性并且测试成功，则加载“yep”case脚本。如果不支持该属性并且测试失败，则加载“nope”case脚本。如果要加载脚本，无论测试是否失败 - “两者”都是如此。例如：

Modernizr.load({
  test: Modernizr.canvas,yep: 'Canvasavailable.js',
  nope: 'FlashCanvas.js',both: 'CustomScript.js'
});

Modernizr.load() 也可以用于您想要创建后备的情况，以防无法访问Google或Microsoft CDN网络，这可能会破坏整个网页。如果没有CDN，如果使用CDN链接包含它们，则不会加载jQuery或Bootstrap脚本。以下示例显示如果CDN失败，如何创建用于加载jquery的备份。

它将首先尝试从谷歌 CDN 下载 jQuery，使用对应“完整”案例的功能来检查 jQuery 是否存在。如果 jQuery 因为无法从 Google CDN 下载而缺席，那么 load 案例将从本地存储加载备份 jQuery

Modernizr.load([{
  load: '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      Modernizr.load('js/libs/jquery/3.3.1/jquery.min.js');
    }
  }
}, {
  // execute this if jquery couldn’t be loaded.
  load: 'backup-jquery.js'
}]);

Modernize.load 和 yesnope.js 已弃用

注意：Modernizr.load 和 yesnope.js 现在已被弃用，当前版本的 Mmodernizr（v3.5）不再支持它。你仍然可以在v2.8中使用它。您可以在此处阅读有关 Modernizr 创建者解决的弃用通知的更多信息。

现在可行的替代方法是使用 jQuery getScript() 方法。以下示例显示了如果浏览器不支持功能检测，如何加载 polyfill 脚本：

if (Modernizr.geolocation){
  //feature is supported by the browser
  console.log('geolocation supported');
} else {
  // feature not supported - load polyfill
  $.getScript('path/script.js').done(function() {
    console.log('script loaded');
  }).fail(function() {
    console.log('script failed to load');
  });
}

官网：https://modernizr.com/docs

分享到QQ

分享到微博