Compat 2021：消除网络上的五个主要兼容性痛点

Google 正在与其他浏览器供应商和行业合作伙伴协作修复 Web 开发人员面临的前五个浏览器兼容性痛点：CSS flexbox，CSS 网格、position:sticky、aspect-ratio 和 CSS 变换。

Mar 22, 2021 — 更新日期 Nov 16, 2021

Available in: English, Español, Português, and 한국어

Robert Nyman

Twitter GitHub Homepage

Philip Jägenstedt

Twitter GitHub Homepage

Google 正在与其他浏览器供应商和行业合作伙伴协作，为 Web 开发人员解决前五个浏览器兼容性痛点。重点领域是 CSS flexbox、CSS 网格、position: sticky、aspect-ratio 和 CSS 变换。请查看如何做出贡献并继续学习如何参与。

背景 #

Web 上的兼容性一直是开发人员面临的一大挑战。在过去的几年里，Google 和其他合作伙伴，包括 Mozilla 和微软，已经着手更多地了解 Web 开发人员的主要痛点，以推动我们的工作和优先级，使情况变得更好。该项目与 Google 的开发者满意度 (DevSAT) 工作相关，随着 2019 年和 2020 年 MDN DNA（开发者需求评估）调查的创建，以及在 MDN 浏览器兼容性报告 2020 中呈现的深入研究工作，它在更大规模范围上开展。已经通过各种渠道进行了其他研究，例如CSS 现状和JS 现状调查。

2021 年的目标是消除五个关键重点领域的浏览器兼容性问题，以便开发人员可以自信地将它们作为可靠的基础。这项工作被称为 #Compat 2021 。

选择关注什么 #

基本上，所有的 Web 平台都存在浏览器兼容性问题，但该项目的重点是针对那些少数最有问题的领域，这些领域可以通过努力取得显着改善，它们是开发人员面临的首要问题，需要消除。

兼容性项目使用多个标准来影响优先考虑的领域，其中一些标准是：

功能使用。例如，75% 的页面浏览量都使用了 flexbox ，而且HTTP Archive 的采用率也在强劲增长。
错误数量（Chromium、Gecko、WebKit 中），以及对于 Chromium，这些错误有多少颗星。
调查结果：
- MDN DNA 调查
- MDN 浏览器兼容性报告
- 最知名和最常用功能的 CSS 现状
来自web-platform-tests的测试结果。例如，wpt.fyi 上的 flexbox。
我可以使用的最常搜索功能。

2021 年的五个重点领域 #

2020 年，Chromium 开始致力于解决 2020 年提高 Chromium 浏览器兼容性中概述的主要领域。2021 年，我们将继续努力。Google 和微软正在与 Igalia 一起致力于解决 Chromium 中的主要问题。Igalia 是 Chromium 和 WebKit 的定期贡献者，也是嵌入式设备官方 WebKit 端口的维护者，一直非常支持并参与这些兼容性工作，并将帮助解决和跟踪已发现的问题。

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

CSS flexbox #

CSS flexbox 在网络上被广泛使用，但对于开发者来说仍然存在一些重大挑战。例如，Chromium 和 WebKit 都存在 auto-height flex 容器的问题，导致图像大小不正确。

Igalia 的 flexbox Cats 博客文章通过更多示例深入探讨了这些问题。

为什么优先 #

调查：MDN 浏览器兼容性报告中的主要问题，CSS 现状中最长使用和最为人所知
测试：所有浏览器中 85% 通过
使用率：75% 的页面浏览量，在 HTTP Archive中增长强劲

CSS 网格 #

CSS 网格是现代 Web 布局的核心构建块，取代了许多旧的技术和变通方法。随着采用率的增长，它需要非常可靠，因此浏览器之间的差异永远不是避免它的理由。缺乏的一个方面是动画网格布局的能力，Gecko 支持，但 Chromium 或 WebKit 不支持。当支持时，可以实现这样的效果：

Chen Hui Jing 演示的动画象棋。

为什么优先 #

调查：MDN 浏览器兼容性报告中的次要问题，众所周知但在 CSS 现状中较少使用
测试：所有浏览器中 75% 通过
使用率：8% 且稳定增长，在 HTTP Archive中略有增长

CSS 位置：粘性 #

粘性定位允许内容粘在视口的边缘，通常用于始终在视口顶部可见的标题。虽然在所有浏览器中都受支持，但在某些常见用例中它无法按预期工作。例如，Chromium 不支持粘性表头，尽管当前在flag 后面受支持，但结果在不同的浏览器之间不一致：

查看由 Rob Flack 提供的粘性表头演示。

为什么优先 #

调查：在 CSS 现状中广为人知和使用，在 MDN 浏览器兼容性报告中多次提及
测试：所有浏览器中 66% 通过
使用率：8%

CSS 纵横比属性 #

新的 aspect-ratio CSS 属性可以轻松地为元素保持一致的纵横比，从而消除对常见的 padding-top hack 的需要：

Using padding-top

```css .container { 宽度：100%;填充顶部：56.25%； } ```

Using aspect-ratio

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

因为它是如此常见的用例，所以预计会被广泛使用，我们希望确保它在所有常见场景和浏览器中都是可靠的。

为什么优先 #

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

CSS 变换 #

多年来，所有浏览器都支持 CSS 变换，并在网络上广泛使用。然而，在许多浏览器中仍然存在许多不同的领域，特别是动画和 3D 变换。例如，卡片翻转效果在浏览器之间可能非常不一致：

Chromium（左）、Gecko（中）和 WebKit（右）中的卡片翻转效果。来自 David Baron 在错误评论中的演示。

为什么优先 #

调查：在CSS 现状中广为人知且广泛使用
测试：所有浏览器中 55% 通过
使用率：80%

您如何做出贡献和关注 #

关注并分享我们在 @ChromiumDev 或公共邮件列表 Compat 2021 上发布的任何更新。确保存在错误，或将您遇到的问题进行归档，如果有任何遗漏，请通过上述渠道联系。

web.dev 上会定期更新进度，您还可以在 Compat 2021 仪表板中关注每个重点领域的进度。

Compat 2021 Dashboard — Compat 2021 仪表板（截图日期：2021 年 11 月 16 日）。

我们希望浏览器供应商之间共同努力提高可靠性和互操作性的举措将帮助您在网络上构建卓越的内容！

Last updated

Nov 16, 2021 — Improve article

Return to all articles