缩小差距

让您更轻松地构建出色网站。

Rachel Andrew

无论是与开发者单独交流，还是通过CSS 现状等调查问卷进行交流，我们总是听到相同的反馈。开发者很难让网站和应用在各种浏览器中都能正常运行，也难以确定何时可以安全地使用令人兴奋的新功能。

Flexbox gap

举一个有问题的属性例子，gap 属性可让您在 grid 或 flex 项或者 multicol 容器中的列之间设置间隙。虽然我们在多列布局中使用 column-gap 已经很长时间了，但该属性最初以 grid-gap 的形式与 grid-column-gap 和 grid-row-gap 一起出现在网格布局中。

网格布局在浏览器中发布后，该属性便与 row-gap 和 column-gap 一起重命名为 gap。然后，它被指定为在 flex 布局中工作。重命名意味着我们不会有多个属性执行相同的操作。

.box {
  display: flex;
  gap: 1em;
}

Firefox 在 2018 年 10 月发布了适用于 Flex 布局的属性。直到 2020 年 7 月，Chrome 才开始显示该图标，Safari 则在 2021 年 4 月才开始显示。这意味着，我们需要等待两年零六个月才能安全地使用 gap。实际上，由于需要支持低于最新版本的浏览器，大多数开发者需要等待更长时间。由于我们无法使用功能查询来检测 flex 布局中的间距支持情况，因此在 flex 布局中支持 gap 会更加困难。由于网格支持 gap 属性，因此 @supports (gap:1em) 将返回 true。

另一个问题是，当某个新功能在某个浏览器中推出时，人们会开始讨论该功能并分享演示。这种情况通常发生在功能发布于任何稳定版浏览器中之前。这可能会让开发者感到困惑，或者至少会让他们感到沮丧。我们经常会听到各种新功能，但发现自己实际上无法使用它们，因为缺少支持。

为什么支持服务存在空档期？

本文并非指责某款浏览器运行缓慢。如果您仔细研究不同平台的功能，就会发现不同浏览器在不同功能方面各有千秋。

大多数功能都会在一个浏览器中进行原型设计。例如，网格布局规范最初由 Microsoft 创建，并在 Internet Explorer 10 中以初始形式实现。Mozilla 的一位工程师做了很多工作来确定子网格的行为方式，因此此功能首先在 Firefox 中推出。我们看到 Safari 在一些激动人心的新颜色函数上处于领先地位。

虽然一个浏览器可能会主导原型设计，但 CSS 工作小组中所有浏览器（和其他组织）的代表都在讨论 CSS 功能。一项功能必须能够在所有浏览器中实现，并且其设计不应导致无法在某个浏览器中实现，这一点非常重要。这将导致永久性缺口支持，且无法采用该功能。

不过，在实现某项功能时，需要将其与该浏览器的所有其他可能的功能一起纳入优先考虑范围。有时，一些工作会受阻，浏览器需要完成一些工作才能改进。一个很好的例子就是 Chromium 中的 RenderingNG 工作。这为实现子网格铺平了道路；不过，Firefox 和 Chromium 之间在推出子网格方面的差距如此之大，是因为需要先在新渲染引擎中重新实现网格布局。

问题

这里有两个问题。第一个是互操作性问题，从某项功能在一个浏览器中发布到在所有浏览器中都支持该功能，可能需要很长时间。

第二个是消息功能问题。如何明确指出支持服务存在哪些缺口？我们该如何在不要求所有人仔细研究每项功能以了解其支持程度的情况下分享新功能？

互操作性

浏览器已经在共同努力解决互操作性问题。去年，Compat 2021 帮助我们缩小了对多项功能（包括 Flex 布局中的 gap 属性）的支持差距。今年，Interop 2022 将重点关注 15 项功能，其中一些功能已经取得了进展。

您可以在 Interop 2022 信息中心上跟踪进度。

消息传递

在 web.dev 和 developer.chrome.com 上介绍功能时，我非常乐意帮助解决第二个问题。我希望您在阅读我们的内容时能够清楚了解功能的状态，并且我们能够提供实用的方法来解决支持问题。

我们已推出多门基础课程，后续还将推出更多课程。这些课程可帮助您了解如何使用核心 Web 平台技术构建适用于现代 Web 的应用。退房日期：

• 学习 CSS
• 了解 Google 表单
• 了解设计
• 了解 PWA

我们正努力确保本网站上的内容均为您可放心使用的。我们尚未完全实现这一目标；不过，在接下来的几个月中，您应该会开始看到一点实践性的变化。

我们还通过支持开放网络文档项目为开放网络文档贡献力量。这确保我们在 MDN 上提供一流的文档，以及最新的浏览器兼容性数据。然后，我们会在 web.dev 上使用这些数据来显示对功能的支持。以下是 Flex 布局中当前对 gap 的支持。

如果您想详细了解 Chrome 对网络的愿景，以及我们在 Origin 和开发者试用版中正在实验的内容，请前往我们的姊妹网站 developer.chrome.com。该网站上的内容可能处于实验阶段，或者目前仅在 Chrome 中受支持，但我们非常欢迎您探索这些内容并提供反馈。

现在，网络领域真的是令人兴奋的时代。我们希望能够帮助您更快地获得关键功能，并明确指出存在的差距，让 Web 开发变得更加有趣、减少挫折感。

照片由 Cristofer Maximilian 拍摄。