兼容性 2021 年节假日更新:可在年底前向开发者赠送礼物

Compat 2021 的年终更新 - 旨在消除 5 个关键领域中的浏览器兼容性问题:CSS Flexbox、CSS 网格、位置:固定、宽高比和 CSS 转换。

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

年末将至,是时候对 Compat 2021 进行最终更新了,该更新旨在消除 5 个重点领域的浏览器兼容性问题。

超过 90%

在所有浏览器中的得分

上次更新以来,我们一如既往地改进了所有浏览器。从年初开始,所有浏览器的测试分数都低很多,但现在所有浏览器都超过了 90%!这意味着 Web 平台显著提高了五个重点领域的互操作性。

2021 年 Compat 信息中心(实验性浏览器)快照
Compat 2021 信息中心(实验性浏览器)快照。

浏览器供应商贡献的内容不仅有浏览器供应商,还有网络社区中的其他人。对于此项目,我们特别要感谢 Igalia 参与,并继续努力提高得分。Igalia 为改进 2021 年度 Compat 的五个重点领域做出了贡献。

在测试结果信息中心 wpt.fyi 上,现在新增了一个过滤后的测试结果视图,其中显示了 Compat 2021 中包含的所有测试。此外,我们还提供 ChromeFirefoxSafari 等视图,并将其结果与 7 月份的上次更新进行比较。

我们来看看各个方面的改进!

CSS flexbox

flex-basis: content 现已面向所有浏览器推出,其实现登陆 ChromiumWebKit。(Gecko 已支持 content 值。)

在 Chromium 中,Flexbox 大小调整问题已修复,与规范和 Gecko 的行为相符。在 Gecko 中,影响 Compat 2021 的几个问题已得到修复,包括 Flex 项目的百分比高度问题。最后,在 WebKit 中,现在添加了对更多对齐属性值(left、rightself-start、self-endstart、end)的支持,还对绝对定位进行了许多改进,还提升了 Compat 2021 中的 Flexbox 测试结果。

CSS 网格

2021 年网络年鉴和 Chrome 的使用指标可以看出,CSS 网格在网络上的使用量持续增加。

Chrome 和 Edge 93 中推出的 GridNG 解决了 Grid 的许多长期问题,还解决了 Chromium 的 bug 跟踪工具中令人印象深刻的 38 个问题。再加上随后的许多小幅改进,Chromium 中 Grid 的 Compat 2021 得分提高了 3% 到 97%。这项工作由 Microsoft 的 Edge 团队主导。

在 Gecko 中修复了影响网格的绝对定位 bug,并在 WebKit 中进行了许多修复。这使得 Firefox 中的 Grid 测试性能提升了 1%,Safari 中的 Grid 测试性能提升了 3%。

CSS position: sticky

在上次更新中,我们注意到 position: sticky 是第一个让任何浏览器(在本例中为 Chrome 和 Edge)都达到 100% 通过测试的区域。现在,在 WebKit 的实现中修复了一些问题后,Safari 在这些测试中的得分也达到了 100%。其中大部分改进都包含在 Safari 15 中。

CSS aspect-ratio 属性

在定义元素宽高比(宽高比)方面的跨浏览器支持不断提高,Chrome/Edge、Firefox 和 Safari 的 Compat 2021 得分分别达到 99%、97% 和 95%。大多数改进并非通过 aspect-ratio 属性本身,而是与 widthheight 属性如何映射到元素的默认 aspect-ratio有关。这是针对 WebKit 中的多个元素以及 Chromium 中的 <canvas> 实现的。

CSS 转换

ChromiumGeckoWebKit 现在支持 transform: perspective(none)。这样可更轻松地在透视和无透视之间添加动画效果。

在 Chromium 中,transform-style: preserve-3d(允许子元素参与同一 3D 场景)和 perspective 属性(对子元素应用透视转换)现在与规范保持一致,方法是将它们仅应用于子元素。

所有浏览器的 CSS 转换得分的显著增加主要是因为我们改进了测试套件,并修复了或移除了错误的测试。这样可以更轻松地了解剩余的互操作性问题,并避免将来出现回归问题。

总结

我们感谢大家今年年终付出的努力,在得分方面做出了许多改进并改进了测试基础架构。aspect-ratio 是 Web 开发者呼声很高的一项功能,现在所有浏览器都支持此功能。用户越来越多地使用 flexbox、grid 和 position: sticky,得益于 2021 年做出的多项改进,这些功能现在在各种浏览器上得到了更好地支持。

接下来有何安排?我们很高兴能够在下一次此工作中继续与其他浏览器供应商以及更广泛的社区合作。我们已开始研究和讨论 2022 年的重点领域。我们即将发布公告,敬请关注。

如果您有任何反馈或问题,请在 Twitter 上与我们联系 (@ChromiumDev)。