2021 兼容性:消除 Web 上的五大兼容性痛点

Google 正与其他浏览器供应商和行业合作伙伴合作,解决 Web 开发者最常遇到的五大浏览器兼容性问题:CSS flexbox、CSS Grid、position: stickyaspect-ratio 和 CSS 转换。

Philip Jägenstedt
Philip Jägenstedt

Google 正与其他浏览器供应商和行业合作伙伴合作,解决 Web 开发者最常遇到的五大浏览器兼容性问题。重点关注的领域包括 CSS flexbox、CSS Grid、position: stickyaspect-ratio 和 CSS 转换。请参阅如何参与和跟进,了解如何参与。

在 Web 上实现兼容性一直是开发者面临的一大挑战。在过去几年中,Google 和包括 Mozilla 和 Microsoft 在内的其他合作伙伴,一直致力于深入了解 Web 开发者的首要痛点,以便推动我们的工作并确定优先事项,从而改善现状。此项目与 Google 的开发者满意度 (DevSAT) 工作相关,并于 2019 年和 2020 年通过创建 MDN DNA(开发者需求评估)调查问卷以及在 2020 年 MDN 浏览器兼容性报告中呈现的深入研究工作,开始了更大规模的实施。我们还通过各种渠道(例如 CSS 现状JS 现状调查)进行了其他研究。

2021 年的目标是消除五个重点领域中的浏览器兼容性问题,以便开发者能够在这些可靠的基础上放心构建应用。此计划称为 #Compat 2021

选择要关注的项目

虽然几乎所有 Web 平台都存在浏览器兼容性问题,但此项目的重点是解决少数问题最严重的方面,这些方面可以得到显著改善,从而不再是开发者面临的主要问题。

兼容性项目会使用多种影响优先级的标准,其中包括:

2021 年的五大重点领域

2020 年,Chromium 开始着手解决2020 年提高 Chromium 的浏览器兼容性中列出的重点领域。2021 年,我们将开始着力实现更大的目标。Google 和 Microsoft 正在与 Igalia 携手合作,共同解决 Chromium 中的重大问题。Igalia 是 Chromium 和 WebKit 的常规贡献者,也是嵌入式设备官方 WebKit 移植的维护者,一直非常支持并参与这些兼容性工作,并将帮助解决和跟踪发现的问题。

以下是我们承诺在 2021 年解决的问题。

CSS Flexbox

CSS flexbox 在 Web 上被广泛使用,但开发者仍然面临一些重大挑战。例如,ChromiumWebKit 都存在 auto-height flex 容器问题,导致图片尺寸不正确。

棋盘的拉伸照片。
由于存在 bug,图片尺寸不正确。
国际象棋棋盘。
图片尺寸正确。
照片由 Alireza Mahmoudi 拍摄。

Igalia 的“Flexbox Cats”博文深入探讨了这些问题,并提供了更多示例。

为何优先处理

CSS 网格

CSS 网格是现代 Web 布局的核心构建块,可取代许多旧版技术和权宜解决方法。随着采用率的不断提高,它需要坚如磐石,因此浏览器之间的差异绝不应成为避免采用的原因。一个缺点是无法为网格布局添加动画效果,Gecko 支持此功能,但 ChromiumWebKit 不支持。支持此功能后,您可以实现如下效果:

动画象棋演示,演示者:Chen Hui Jing

为何优先处理

CSS 位置:sticky

固定定位可让内容固定在视口边缘,通常用于始终显示在视口顶部的标题。虽然所有浏览器都支持此属性,但在某些常见用例中,它无法按预期运行。例如,Chromium 不支持固定表格标题,虽然现在在启用标志后支持,但不同浏览器中的结果不一致:

Chromium(使用“TablesNG”)
Gecko
WebKit

查看 Rob Flack 的固定表格标题演示

为何优先处理

CSS aspect-ratio 属性

借助新的 aspect-ratio CSS 属性,您可以轻松地为元素保持一致的宽高比,而无需使用众所周知的 padding-top 黑客攻击

使用 padding-top
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
使用 aspect-ratio
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

由于这是一个非常常见的用例,因此预计会被广泛使用,我们希望确保它在所有常见场景和浏览器中都能够正常运行。

为何优先处理

  • 调查问卷:在 CSS 现状中已广为人知,但尚未广泛使用
  • 测试:在所有浏览器中,27% 的测试通过
  • 使用率:3%,预计会增长

CSS 转换

所有浏览器多年来都支持 CSS 转换,并且在 Web 上广泛使用。不过,在许多方面,不同浏览器的 CSS 效果仍然不尽相同,尤其是在动画和 3D 转换方面。例如,不同浏览器中的卡片翻转效果可能非常不一致:

Chromium(左)、Gecko(中)和 WebKit(右)中的卡片翻转效果。 此演示由 David Baron 提供,取自bug 评论

为何优先处理

如何贡献内容和跟进进度

欢迎关注 @ChromiumDev公开邮寄名单 Compat 2021,及时了解我们发布的所有动态并分享相关信息。请确保存在 bug,或者提交 bug 来报告您遇到的问题。如果缺少任何信息,请通过上述渠道与我们联系。

web.dev 上会定期更新有关进度的最新动态,您还可以在 2021 年兼容性信息中心中跟踪每个重点领域的进度。

Compat 2021 信息中心
2021 年兼容性信息中心(屏幕截图,拍摄时间:2021 年 11 月 16 日)。

我们希望浏览器供应商共同努力提升可靠性和互操作性,这将有助于您在 Web 上构建出色的应用!