antdesign 所兼容的浏览器_使用Modernizr进行特征检测实现跨浏览器兼容性

我们深入研究了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文件包含在页面部分中。

3.将“no-js”类添加到标记中。

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

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

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

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

利用Modernizr进行CSS特征检测

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

例如，如果box-shadow 浏览器支持该 属性，则 boxshadow Modernizr类将添加到标记中。如果不支持，则 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-