让您更轻松地构建出色网站。
无论是与开发者单独交流,还是通过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 的应用。退房日期:
我们正努力确保本网站上的内容均为您可放心使用的。我们尚未完全实现这一目标;不过,在未来几个月内,您应该会开始看到一些向实用性转变的迹象。
我们还通过支持 Open Web Docs 项目,为开放 Web 文档做出贡献。这确保我们在 MDN 上提供一流的文档,以及最新的浏览器兼容性数据。然后,我们会在 web.dev 上使用这些数据来显示对功能的支持。以下是 flex 布局中对 gap
的当前支持。
浏览器支持
如果您想详细了解 Chrome 对网络的愿景,以及我们在 Origin 和开发者试用版中正在实验的内容,请前往我们的姊妹网站 developer.chrome.com。该网站上的内容可能处于实验阶段,或者目前仅在 Chrome 中受支持,但我们非常欢迎您探索这些内容并提供反馈。
现在,网络领域真的是令人兴奋的时代。我们希望能够帮助您更快地获得关键功能,并明确指出存在的差距,让 Web 开发变得更加有趣、更少挫折。
照片由 Cristofer Maximilian 拍摄。