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

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

Philip Jägenstedt
Philip Jägenstedt
X GitHub 首页
Robert Nyman

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

背景

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

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

选择要关注的项目

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

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

2021 年五大重点领域

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

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

CSS Flexbox

CSS Flexbox 为 广泛使用 这对开发者来说仍然面临着一些重大挑战。例如： Chromium 和 WebKit 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 支持，但不支持 Chromium 或 WebKit。如果支持， 可以实现以下效果：

<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 上构建出色的内容！