缩小差距

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

Rachel Andrew

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

Flexbox gap

举例来说，gap 属性就是一个有问题的属性，它可让您在网格或弹性项之间或多列容器中的列之间留出间隙。虽然我们长期以来一直在多列布局中使用 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 布局中的 gap 支持，因此在 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。退房日期：

我们正在努力将本网站的内容重点放在您可以安全使用的功能上。虽然我们尚未完全实现这一目标，但在接下来的几个月里，您应该会开始看到一些更偏向实用的变化。

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

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

如果您想详细了解 Chrome 对 Web 的愿景，以及我们在源试用和开发者试用中正在试验的内容，那么您会越来越多地在我们的姊妹网站 developer.chrome.com 上找到这些内容。这些内容可能只是实验性的，或者目前仅在 Chrome 中受支持，但我们非常希望您能探索这些内容并提供反馈。

现在真的是 Web 领域激动人心的时刻。我们希望能够帮助您更快地获得关键功能，并清楚地了解确实存在的差距，从而让 Web 开发变得更有趣、更轻松。