我们深入研究了Modernizr框架的工作原理，这是开发人员工具包中用于跨浏览器兼容性的绝佳选择。
Modernizr是一个开源和紧凑的 JavaScript库 ，允许开发人员在跨浏览器兼容性方面为用户创建各种级别的体验。Modernizr帮助开发人员执行跨浏览器测试，以检查 访问者的浏览器本身是否支持新一代 HTML5和CSS3功能，并为旧版浏览器提供专用的后备功能，这些浏览器因其功能支持不佳而臭名昭着。Modernizr与渐进增强的原理相结合， 有助于逐层设计尖端网站，利用强大的现代Web技术，而不会丢弃仍在使用IE等旧版浏览器的用户。
Modernizr如何运作？
Modernizr于2009年7月由FarukAte?推出，以统一，标准化的方式解决跨浏览器兼容性问题。今天，Modernizr作为特征检测库是最受欢迎的JavaScript库之一，提供超过270个测试，并且正在全球8.76％的网站中使用（仅在美国就有50万个网站）。而不是依赖于使用“用户代理”嗅探的高度不可靠的浏览器检测方法，而Modernizr则基于特征检测。虽然浏览器检测的中心问题是“访问者使用的浏览器是什么？”功能检测围绕着这个问题，
对于特征检测，Modernizr执行三个基本功能：
- 添加指示功能支持的类，可用于有条件地将CSS样式规则应用于不同的元素。
- 创建一个JavaScript对象，以检查或验证对浏览器中任何HTML或CSS功能的支持。
- 允许开发人员有条件地提供自定义JS脚本或polyfill来模仿缺少的功能。
重要的是要记住，使用Modernizr进行特征检测只能检测支持哪些功能。它无法为旧版浏览器中不受支持的功能提供功能。这是通过“polyfilling”实现的，我们将在本博客后面讨论。
我还写了另一个博客，它代表使用 @support 功能查询来执行 CSS功能检测以实现跨浏览器兼容性。
设置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("https://unsplash.it/640/425?image=44");
}
.cssgradients .header {
background-image: url("https://unsplash.it/640/425?image=44"), 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');
});
}
本文暂时没有评论，来添加一个吧(●'◡'●)