缩小差距

更轻松地构建 Web 应用。

我们与开发者沟通时,无论是个人沟通还是通过 CSS 现状等调查问卷反馈,都会反复听到相同的情况。开发者发现很难让网站和应用都能跨浏览器顺畅运行,而且很难确定激动人心的新功能何时可以安全使用。

Flexbox gap

举一个有问题的属性的示例,gap 属性可让您在 gridflex 的项目或 multicol 容器中的列之间留出间隙。虽然在多列中使用 column-gap 很长时间,但该属性最初以 grid-gapgrid-column-gapgrid-row-gap 的形式出现在网格布局中。

在网格布局进入浏览器中后,该属性就被重命名为 gap,以及 row-gapcolumn-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 的工程师做了大量工作来决定 subgrid 的行为方式,因此此功能首先出现在 Firefox 中。我们看到 Safari 在一些激动人心的新颜色功能方面处于领先地位。

尽管在原型设计方面某个浏览器可能起到主导作用,但 CSS 工作组中的所有浏览器(和其他组织)的代表都会讨论 CSS 功能。需要注意的是,某项功能应在所有浏览器中实现,且不会导致无法在一个浏览器中实现。这会导致支持服务出现缺口,并且无法采用该功能。

然而,在实现某项功能时,需要优先考虑该功能与相应浏览器可能使用的所有其他功能。而且,有时一些事情会阻碍我们改进浏览器的其他工作。Chromium 中的 RenderingNG 就是一个很好的例子。这为 subgrid 的实现铺平了道路;然而,Firefox 和 Chromium 交付 subgrid 之间有很大的差距是因为需要先在新的渲染引擎中重新实现网格布局。

问题

这里有两个问题。第一个是互操作性问题,即从功能在一个浏览器中加入到在所有地方均可用,这需要很长时间。

第二个是消息问题。如何澄清支持服务的不足之处?我们该如何分享新功能,同时又不会导致每个人必须认真研究每项功能才能确定它们的支持程度呢?

互操作性

各个浏览器已经在携手解决互操作性问题。去年,Compat 2021 帮助缩小了多项功能在支持方面的差距,包括 flex 布局中的 gap 属性。今年的 Interop 2022 计划侧重于 15 项功能,其中一些功能已经取得了一定的进展。

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

消息功能

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

我们已经推出了一些基础课程,未来还会有更多课程。这些课程将帮助您了解如何使用核心 Web 平台技术针对现代 Web 构建应用。退房日期:

我们正努力将本网站上的内容重点放在您可以安全使用的内容上。我们还没有完全做到这一点;但是,您应该会开始看到在未来几个月内稍微向实践性方向转变。

此外,我们还通过支持打开网页文档项目为开放式网络文档做贡献。这可确保我们拥有一流的 MDN 文档,以及最新的浏览器兼容性数据。然后,我们会使用 web.dev 上的这些数据来表明对功能的支持情况。以下是 flex 布局中 gap 的当前支持情况。

浏览器支持

  • 84
  • 84
  • 63
  • 14.1

如果您想详细了解 Chrome 的网络愿景,以及我们在源试用和开发者试用中开展的各种实验,则会越来越多地在我们的姊妹网站 developer.chrome.com 上发现这些内容。其中的内容可能处于实验阶段,或者目前仅在 Chrome 中受支持,但我们希望您能进行深入探索并提供反馈。

网络时代真的是一次激动人心的事。我们希望能够帮助您更快地推出关键功能,并澄清存在的不足,从而让 Web 开发更有趣,不再令人沮丧。

摄影:Cristofer Maximilian