2021 年年中兼容:灵活差距无处不在

Compat 2021 的年中更新 - 旨在消除以下五个关键领域的浏览器兼容性问题:CSS flexbox、CSS 网格、位置:粘性、宽高比和 CSS 转换。

菲利普·耶根斯特德
Philip Jägenstedt
小阪马里子

是时候发布 Compat 2021 的年中更新了,该更新旨在消除五个主要领域的浏览器兼容性问题。如需详细了解 #compat2021 的研究成果以及我们如何确定重点关注领域,请查看 3 月的公告

本博文中讨论的 Chromium 改进将适用于 Chrome、Edge 和所有基于 Chromium 的浏览器。

我们如何衡量进度

您可以在 2021 年兼容性信息中心查看 web-platform-tests,了解通过的测试数量以及不同浏览器的趋势图表。

简单的“已通过的测试”数量并不能全面反映浏览器兼容性,但它是我们用来了解工作进展的信号之一。不同浏览器在测试结果方面的差异越小,意味着同一网络功能在多个浏览器间的互操作性就越强。

图片说明:2021 款 Compat 2021 信息中心(实验性浏览器)概况
Compat 2021 信息中心(实验性浏览器)快照。

CSS flexbox

所有这三种浏览器引擎都改进了 flexbox

Safari 14.1 附带了 flexbox 的 gap 属性gap 属性是设置项之间间距的便捷方式。此属性经常用于网格布局,并且对 Flexbox 布局的支持是 MDN 浏览器兼容性报告中请求次数最多的功能之一。经过此次更新,Flex 布局中的 gap 属性在所有主流浏览器中都可用,并解决了最大的兼容性问题。Safari 14.1 还包含对 Flexbox 中的图片的许多修复,消除了对旧解决方案的依赖。

Firefox 解决了将表格呈现为 Flex 项的问题,使 Firefox 更接近于 100% 通过测试(目前为 98.5%)。

Chromium 还修复了将表作为 Flex 项的问题。 在 Chromium 88 中,我们还将图片重写为 Flex 项,解决了许多长期存在的 bug。最后,Chromium 最近增加了对新的对齐关键字的支持startendself-startself-endleftright。这些关键字可在 Chrome CanaryEdge Canary 中试用。

CSS 网格

CSS 网格的使用量稳步增长,目前占网页浏览量的 9%。所有三大浏览器引擎都实现了 CSS Grid,并且已经通过了超过 89% 的相关 web-platform-tests。缩小兼容性差距对于支持此功能的稳步发展至关重要。

截至 2021 年,Safari 通过测试的比例已从 89% 提高到 93%,Chromium 还在研究一种新的架构,以解决更多 CSS 网格问题,称为 GridNG。这是由 Microsoft 团队主导的一项努力,并使目标网格测试的近期比例从 94% 提高到 97%。您很快就会在 Edge 博客上发布有关 GridNG 的更新。

CSS position: sticky

在 Chromium 中,表标头的 position: sticky 随着 TablesNG 的发布而得到修复,这是我们多年来一直在努力重新设计表渲染架构。此更改连同几项最终 修复,使 Chrome 和 Edge 93 开发者渠道通过了 100% 的目标测试

除了 position: sticky 之外,TablesNG 还解决了 72 个 Chromium bug

CSS aspect-ratio 属性

aspect-ratio 属性可让您轻松设置宽高比,这对于自适应设计至关重要。它也是防止累计布局偏移的解决方案。

现在,稳定版 Chrome、Edge 和 Firefox 以及 Safari 15 Beta 版均支持 aspect-ratio 属性。随着跨浏览器支持的改进,使用量也在不断增加。

虽然所有浏览器都未通过测试,但在 Compat 2021 的所有五个重点领域,aspect-ratio 的兼容性差距是最小的。在所有主流浏览器上,该产品的通过测试率已超过 90%。今后,我们将使用此测试套件继续监控进度,使其成为一个可靠的功能。

详细了解 web.dev 上的 aspect-ratio 属性的用法和优势。

CSS 转换

由于修复了一些 bug 以及对测试本身的改进,CSS 转换的针对性测试的结果得到了缓慢而稳定的改善。

Chromium 团队还在努力提高 transform-style: preserve-3dtransform :perspective() 的互操作性。我们希望在下一次更新中分享更多进展。

总体得分提高

自 3 月份发布公告以来,这三种浏览器引擎的 Compat 2021 得分都有所提高:

  • Chrome 和 Edge Dev 从 86 提高到了 92。
  • Firefox 从 83 提升到了 86。
  • Safari 从 64 增加到 82。

值得注意的是,由于 WebKit 贡献者的大量工作,Safari 已将兼容性差距缩小了 18 个点。特别值得一提的是,Igalia 的团队为 aspect-ratio 属性做出了多项改进,还对 Flexbox 和 Grid 做出了许多改进,例如针对 flexbox 使用 gap 并修复了各种问题。

关注 2021 年兼容功能进度

如需关注 Compat 2021 的进展,请关注信息中心、订阅我们的邮寄名单,或发送电子邮件至 @chromiumdev。如果您遇到任何问题,请务必针对受影响的浏览器提交 bug