缩小差距

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

Rachel Andrew

无论是与开发者进行一对一交流，还是通过 CSS 现状等调查问卷，我们都反复听到相同的问题。开发者很难制作出可在各种浏览器中顺畅运行的网站和应用，也很难知道何时可以安全地使用令人兴奋的新功能。

Flexbox gap

以存在问题的属性为例，gap 属性可让您在网格或弹性项之间或 multicol 容器中的列之间留出间距。虽然我们很早就已在多列布局中使用 column-gap，但该属性首次出现在网格布局中时为 grid-gap，同时还出现了 grid-column-gap 和 grid-row-gap。

在网格布局刚在浏览器中实现后，该属性便更名为 gap，同时更名的还有 row-gap 和 column-gap。随后，该属性也被指定为可在灵活布局中使用。重命名意味着我们不会有多个属性执行相同的操作。

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

Firefox 于 2018 年 10 月发布了 flex 布局的该属性。直到 2020 年 7 月，它才出现在 Chrome 中，随后于 2021 年 4 月出现在 Safari 中。这意味着，在安全使用 gap 之前，我们有两年半的时间无法使用该功能。实际上，由于需要支持比最新版本更旧的浏览器版本，大多数开发者的等待时间要长得多。由于我们无法使用功能查询来检测 flex 布局中的间距支持，因此在 flex 布局中支持 gap 变得更加困难。由于网格支持 gap 属性，因此 @supports (gap:1em) 将返回 true。

另一个问题是，当某个浏览器中出现新功能时，人们会开始讨论并分享演示。这通常在相应功能尚未纳入任何稳定版浏览器之前就开始了。这可能会让开发者感到困惑，至少也会让他们感到沮丧。到处都在热议闪亮的新功能，但您却发现自己无法使用这些功能，因为它们不受支持。

为什么支持服务存在缺口？

本文并非指责某个浏览器速度慢。如果您查看不同平台的功能，就会发现不同的浏览器在不同的功能方面处于领先地位。

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

虽然某个浏览器可能率先进行原型设计，但 CSS 工作组中的所有浏览器（和其他组织）的代表都会讨论 CSS 功能。非常重要的一点是，某项功能可以在所有浏览器中实现，并且其设计方式不会导致无法在某个浏览器中实现。这会导致支持方面出现永久性差距，并且该功能无法得到采用。

不过，在实现某项功能时，需要与其他所有可能的浏览器功能一起确定优先级。有时，为了改进浏览器，我们需要先完成其他工作，这可能会导致某些功能延迟推出。Chromium 中的 RenderingNG 工作就是一个很好的例子。这为实现子网格铺平了道路；不过，Firefox 和 Chromium 推出子网格之间之所以存在很长时间的间隔，是因为需要先在新渲染引擎中重新实现网格布局。

问题

这里有两个问题。首先是互操作性问题，即一项功能从在一个浏览器中推出到在所有浏览器中推出可能需要很长时间。

第二种是消息传递问题。如何清楚地了解支持方面的差距？我们如何分享新功能，才能避免让每个人都必须仔细研究每项功能，才能确定其支持程度？

互操作性

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

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

消息传递

第二个问题是，当我们在 web.dev 和 developer.chrome.com 上讨论功能时，我很想帮助解决这个问题。我希望您在阅读我们的内容时，能够清楚地了解功能的状态，并希望我们能提供实用的方法来解决支持问题。

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

我们正努力调整本网站上的内容，以便重点介绍您可以安全使用的内容。我们尚未完全实现这一目标；不过，在未来几个月内，您应该会看到一些向实用性转变的迹象。

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

Browser Support

如果您想详细了解 Chrome 对 Web 的愿景，以及我们在 Origin 试用和开发者试用中尝试的功能，那么您会发现，我们姊妹网站 developer.chrome.com 上有越来越多的相关内容。这些内容可能处于实验阶段，或者目前仅在 Chrome 中受支持，但我们非常希望您探索这些内容并提供反馈。

现在确实是网络发展的一个令人兴奋的时代。我们希望能够更快地为您提供关键功能，并清楚说明目前存在的差距，让 Web 开发变得更有趣、更轻松。

照片提供方：Cristofer Maximilian。