缩小差距

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

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

Flexbox gap

gap 属性就是一个存在问题的属性示例,您可以使用该属性在 gridflex 项之间或 multicol 容器中的列之间设置间距。虽然我们在多列布局中使用 column-gap 已经很长时间了,但该属性最初在网格布局中以 grid-gap 的形式出现,同时还有 grid-column-gapgrid-row-gap

网格布局在浏览器中发布后,该属性便与 row-gapcolumn-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 的应用。退房日期:

我们正努力确保本网站上的内容均为您可放心使用的。我们尚未完全实现这一目标;不过,在未来几个月内,您应该会开始看到一些向实用性转变的迹象。

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

浏览器支持

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

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

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

照片由 Cristofer Maximilian 拍摄。