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

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

Philip Jägenstedt
Philip Jägenstedt

Google 正与其他浏览器供应商和行业合作伙伴展开合作, Web 开发者在浏览器兼容性方面的五大痛点。重点关注领域 是 CSS flexbox、CSS Grid、position: stickyaspect-ratio 和 CSS 转换。请参阅如何做出贡献并跟上学习进度, 了解如何参与其中。

背景

Web 上的兼容性一直是开发者面临的一大挑战。在 包括 Mozilla 和 Microsoft 已经着手深入了解网络领域的主要痛点 ,从而推动我们工作并排定优先次序,从而改善这一状况。 此项目已与 Google 开发者 满意度 (DevSAT) 工作,以及 随着 Google Cloud 的 MDN DNA(开发者需求评估)调查问卷 以及 2019 年和 2020 年的 2020 年 MDN 浏览器兼容性报告。 我们还通过各种渠道进行了进一步研究,例如 CSSJS 现状 调查问卷。

2021 年的目标是从 5 大重点领域中消除浏览器兼容性问题 以便开发者可以放心地将其用作可靠基础。这个 名为 #Compat 2021

选择要关注的项目

虽然几乎所有网络网页都存在浏览器兼容性问题, 这个项目的重点是少数几个 有待显著改进的方面,从而消除这些方面 。

兼容性项目使用多个标准来影响 其中部分包括:

2021 年五大重点领域

2020 年,Chromium 开始着手解决 在 2020 年提升 Chromium 的浏览器兼容性。 2021 年,我们将开始致力于更进一步。Google 和 Microsoft 与 Igalia 携手合作,共同解决 Chromium 中的常见问题。Igalia:经常捐赠人 以及适用于嵌入式设备的官方 WebKit 端口的维护人员 一直非常支持并参与这些兼容性工作,并且 以帮助解决和跟踪发现的问题。

以下是我们承诺在 2021 年修复的领域。

CSS Flexbox

CSS Flexbox广泛使用 这对开发者来说仍然面临着一些重大挑战。例如: ChromiumWebKit auto-height Flex 容器存在问题,导致图片大小不正确。

<ph type="x-smartling-placeholder">
</ph> 拉伸的棋盘照片。 <ph type="x-smartling-placeholder">
</ph> 错误导致图片大小不正确。
<ph type="x-smartling-placeholder">
</ph> 棋盘。
图片大小正确。
照片提供者:Alireza Mahmoudi。

Igalia 的 Flexbox 猫咪 这篇博文通过更多示例深入探讨了这些问题。

为何需要优先考虑

CSS 网格

CSS 网格是 现代网页布局的核心构建块,取代了许多旧技术 和解决方法。随着采用率的提高,需要稳健可靠,这样才能 浏览器之间的差异也绝不可能成为规避此影响的理由。一个是 缺少为网格布局添加动画效果的功能,Gecko 支持,但不支持 ChromiumWebKit。如果支持, 可以实现以下效果:

<ph type="x-smartling-placeholder">
</ph>
陈氏动画国际象棋演示 Hui Jing

为何需要优先考虑

CSS 位置:sticky

固定位置 允许内容固定在视口的边缘,通常用于 指定始终显示在视口顶部的标头。在支持的情况下 在所有浏览器中,常见用例都无法按预期运行。 例如: 粘性表格标题 不支持,但现在 支持 结果因浏览器而异:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chromium 与“TablesNG”
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 壁虎
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebKit

查看固定表格标题 演示

为何需要优先考虑

CSS 宽高比属性

新的 aspect-ratio CSS 属性可让您轻松地为 因此,您无需使用众所周知的 padding-top 技巧

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

由于这是一个常见的用例,因此预计会得到广泛使用, 我们希望确保它在所有常见场景下和各种浏览器中都可靠。

为何需要优先考虑

CSS 转换

CSS 转换 多年来一直支持所有浏览器,并广泛应用于 。然而,仍有许多方面它们的工作原理不尽相同 尤其是动画和 3D 转换功能。例如,某张卡 翻转效果在不同浏览器之间可能会非常不一致:

<ph type="x-smartling-placeholder">
</ph>
Chromium(左侧)、Gecko(中)和 WebKit(右侧)中的卡片翻转效果。 David Baron 出自 bug 的演示 评论

为何需要优先考虑

如何贡献内容并关注他人

关注并分享我们发布的任何最新动态 @ChromiumDev公共邮寄名单、 与 2021 年兼容。确保存在错误,或者 提交报告,解决您遇到的问题 如有任何缺失,请通过上述 渠道。

我们会在 web.dev 上定期更新进展情况, 在 Compat 2021 信息中心

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> 2021 年 Compat 信息中心
Compat 2021 信息中心(2021 年 11 月 16 日的屏幕截图)。

我们希望浏览器供应商的共同努力, 互操作性将帮助您在 Web 上构建出色的内容!