Modernizr 如何帮助您实现 CSS 回退

已发表: 2021-04-05

作为网页设计师，我们经常被鼓励利用 CSS 提供的最新和最强大的功能。 这样做有很多令人信服的理由。 CSS Grid 和 Flexbox 等技术可以快速处理常见布局，而 CSS 动画则增加了移动性和交互性。 这只是冰山一角。

但是，实现这些功能有时会以浏览器兼容性为代价。 对于仍然有大量用户使用旧版浏览器的网站，或者对于非常新的功能，存在将一些人排除在外的风险。

从哲学上讲，一些设计师对此很满意——这没关系。 但是为这些功能实现后备可能比您想象的要容易。 这些故障保护措施提供了对特定布局或设计元素的合理复制，并且与旧版 Web 浏览器兼容。

今天，我们将向您展示如何利用 Modernizr 特征检测库来实现此目的。 开始了！

什么是 Modernizr？

Modernizr 是网页设计师多年来一直依赖的便捷工具之一。 它是一个可以定制的库，可以在网页加载时“检测”（实际上，它正在运行测试）特定功能。 从那里，它将 CSS 类添加到页面的<HTML>元素，允许设计人员根据库找到的内容来定位他们的代码。

在我们的例子中，我们将使用它来检测 CSS Flexbox。 但是，它也能够查找与 HTML 和 JavaScript 相关的功能。 例如，您可以使用它来确定浏览器是否支持 HTML5。 如果没有，可以使用可用的 HTML5 shiv 脚本将其升级为代码，可以这么说。

真正好的是您可以自定义 Modernizr 以满足您的项目需求。 他们网站的用户界面将让您只挑选您想要检测的项目。 做出选择后，单击“构建”按钮以生成自定义的可下载包。

我们的构建

为了我们的目的（并且为了简单起见），我们正在构建我们的 Modernizr 包来检测 Flexbox。 我们还将选择缩小代码并添加 CSS 类。

Modernizr 网站。

第 1 步：设置演示

为了演示这一切是如何工作的，需要几个文件——两者都可以在 GitHub 上找到：

  • flexgrid.css – 这是我们简单的 CSS Flexbox 网格系统。 您会注意到它具有用于不同对齐方式和列宽的类。 此外，还有一组特殊的.no-flexbox类也使用老式 CSS 浮点数。 这将帮助我们在旧版浏览器中创建类似的布局样式。
  • modernizr-custom.js - 上述脚本将检测当前浏览器是否支持 CSS Flexbox。

接下来，我们将要创建一个新的 HTML 文档，它调用<head>区域中的上述两个文件。 此外，该文档还需要一个示例 CSS Flexbox 布局和一些内容。

您可以随意使用下面的演示文件进行实验。 它包含一个简单的 3 列布局，以及一些小的视觉增强（稍后会详细介绍）。

第 2 步：在现代浏览器中查看 HTML 文档

现在是时候看看我们的演示在浏览器中的样子了。 首先，让我们使用支持 Flexbox 的现代 Web 浏览器。

3 列 CSS 布局。

至少，我们怀疑它支持 Flexbox。 我们怎么能确定呢？ 这就是 Modernizr 要做的事情。

在我们的例子中，我们要查看演示页面的源代码，特别是<HTML>元素。 如果元素中添加了一个flexbox类，我们就知道我们的浏览器支持该功能。 继续并在您的浏览器中查看页面源 - 我们将等待。

课堂在哪里？

如果您尝试查看页面的完整源代码，您可能已经注意到<HTML>元素不包含类。 别担心——这是正常的。

这是因为该类是在运行时添加的，在Modernizr 测试所选功能之后。 因此，它不会出现在完整的源代码中。

使用浏览器的开发者工具

相反，打开您的 Web 浏览器的开发人员工具（按键盘上的F12按钮）。 这将提供对<HTML>元素的准确查看。

在这里，我们使用的是最新版本的 Firefox 开发者版。 据 Modernizr 称，它支持 CSS Flexbox。 耶！

显示 CSS Flexbox 支持的 Firefox 开发者工具。

第 3 步：在旧版浏览器中测试 CSS 回退

在我们的现代浏览器中，一切看起来都很棒。 但是遗留软件呢？

我们的样式设置为在不支持 Flexbox 的浏览器中使用 CSS 浮动。 这个后备应该允许我们创建一个多列布局，即使是在古老的设置上。

根据 Can I use 的说法，Flexbox 的部分支持最早可以追溯到 Internet Explorer 10、Firefox 2、Chrome 4 和 Safari 3.1。 自从这些浏览器被广泛使用以来，已经过去了很多年。 然而，特别是 IE 仍然到处挂着。

Modernizr 可以配置为测试部分支持——但它会变得混乱。 它会导致编写更多的 CSS 回退，以考虑许多不同的情况。 这不是很有效。 因此，我们正在我们的测试中寻找全有或全无的支持。

让我们看看我们在 IE 10 中的演示（通过浏览器测试服务），看看会发生什么。

3 列 CSS 布局，第三列被推到新行。

不是太寒酸。 我们的第三列被推到下一行，可以调整。 但是 Flexbox 支持呢？

快速浏览一下 IE 的开发者工具可以看出，我们的<HTML>元素显示了一个no-flexbox类。 这意味着这里不支持Flexbox，并且正在使用 CSS 后备。

Internet Explorer 开发人员工具显示不支持 CSS Flexbox。

修复 CSS 浮动的布局

我们的后备 CSS 浮动不会与我们所做的视觉增强配合。 第三列被推到第二行，看起来不是很好。

这是因为浮动为我们之前在样式表中设置的列宽添加了填充和边框。 另一方面，Flexbox 可以在不增加整体列宽的情况下调整这些项目。 因此结果不同。

我们可以做一些不同的事情来纠正这种情况。 我们可能会减少列的宽度，甚至缩小列之间的边距。 让我们尝试将列宽从30.66%减少到28.66% 。

比较：CSS Flexbox 布局（顶部）和 CSS 浮动回退（底部）。

有效！ 我们的列现在可以愉快地显示并且与 Flexbox 版本相当相似。 除了一些间距差异之外，这至少可以在旧浏览器中使用。 我们可以进入并进行进一步的更改以更接近原始版本。

检测浏览器功能并进行相应调整

虽然我们的演示侧重于检测 CSS Flexbox，但 Modernizr 可以做得更多。 它可以查找其他常见功能，例如 HTML Canvas、SVG 支持、CSS Grid 和一系列其他有用的花絮。

这个想法是，一旦你知道用户的浏览器能做什么，你就可以调整你的代码来效仿。 这使得采用更新的 CSS 规范（例如，一个不那么令人担忧的过程）。

也许您不需要在每个实例中都使用回退。 但是很高兴知道在 Modernizr 的帮助下实现它们很容易。