我们深入研究了Modernizr框架的工作原理，这是开发人员工具包中用于跨浏览器兼容性的绝佳选择。
Modernizr是一个开源和紧凑的JavaScript库，允许开发人员在跨浏览器兼容性方面为用户创建各种级别的体验。Modernizr帮助开发人员执行跨浏览器测试，以检查访问者的浏览器本身是否支持新一代HTML5和CSS3功能，并为旧版浏览器提供专用的后备功能，这些浏览器因其功能支持不佳而臭名昭着。Modernizr与渐进增强的原理相结合，有助于逐层设计尖端网站，利用强大的现代Web技术，而不会丢弃仍在使用IE等旧版浏览器的用户。
Modernizr如何运作？
Modernizr于年7月由FarukAte推出，以统一，标准化的方式解决跨浏览器兼容性问题。今天，Modernizr作为特征检测库是最受欢迎的JavaScript库之一，提供超过个测试，并且正在全球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后，打开命令行并输入：npminstall-gmodernizr
2.现在将下载的Modernizr文件包含在页面部分中。
scriptsrc=modernizr-custom.js/script
3.将“no-js”类添加到html标记中。
!DOCTYPEhtmlhtmlclass=no-jsheadscriptsrc=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标记的类
htmlclass=jsno-flexboxcanvascanvastextno-webglno-touchgeolocationpostmessageno-websqldatabaseno-indexeddbhashchangeno-historydraganddropno-websocketsrgbahslamultiplebgsbackgroundsizeno-borderimageborderradiusboxshadowno-textshadowopacityno-cssanimationsno-csscolumnsno-cssgradientsno-cssreflectionscsstransformsno-csstransforms3dno-csstransitionsfontfacegeneratedcontentvideoaudiolocalstoragesessionstorageno-webworkersno-applicationcachesvginlinesvgsmilsvgclippaths
利用Modernizr进行CSS特征检测
Modernizr将这些类添加到html标记中，以根据给定浏览器是否支持某个功能来检测CSS样式属性。具有no-前缀的类将自动应用于不支持这些相应功能的浏览器中。
例如，如果box-shadow浏览器支持该属性，则boxshadowModernizr类将添加到html标记中。如果不支持，则no-boxshadow添加Modernizr类。我们可以使用这两个CSS类来有效地定位所有浏览器，而不管它们对这个特定功能的支持。本.boxshadow类可以用来风格box-shadow围绕一个div水平偏移和垂直的10px的，8像素的模糊，以及所有支持的浏览器和15px的蔓延抵消.no_boxshadow类可用于较厚的边框宽度，以弥补缺乏编写一个回退所有不受支持的浏览器的任何阴影。
.boxshadow#box{border:2pxsolidblack; -webkit-box-shadow:10px10px8px10px#; -moz-box-shadow:10px10px8px10px#;}.no-boxshadow#box{ border:5pxsolidblack;}
因此，与使用User-Agent字符串编写大量代码来定位单个浏览器不同，使用Modernizr进行特征检测可以将任务简化为仅编码两个代码块-一个用于兼容的浏览器，另一个用于不兼容的浏览器。
CSS线性渐变的另一个例子：
.no-cssgradients.header{background:url(
