此页面由 Cloud Translation API 翻译。

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

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

Philip Jägenstedt

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。

选择要关注的项目

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

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

功能使用情况。例如，Flexbox 用于 75% 占网页浏览总量的百分比，并且 HTTP 的采用率正在大幅增长归档。
错误数量（在 Chromium 中， Gecko， WebKit）中；对于 Chromium，这些对象获得了多少星星错误。
调查结果：
- MDN DNA 调查
- MDN 浏览器兼容性报告
- CSS 现状最常用和最常用功能
来自 web-platform-tests 的测试结果。例如，flexbox on wpt.fyi.
我能使用搜索次数最多的功能吗？

2021 年五大重点领域

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

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

CSS Flexbox

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

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

为何需要优先考虑

问卷调查：以下领域的首要问题： MDN 浏览器兼容性报告，最知名和使用最多的 CSS
测试：所有浏览器均通过 85% 的测试
用法： 75% 的网页浏览量，在HTTP 归档

CSS 网格

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

</ph>

陈氏动画国际象棋演示 Hui Jing。

为何需要优先考虑

问卷调查：亚军 MDN 浏览器兼容性报告，众所周知，但在美国 CSS
测试：所有浏览器通过 75%
用法： 8% 且稳步增长，在 HTTP/HTTPS 搜索中，归档

。

CSS 位置：sticky

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

查看固定表格标题演示。

为何需要优先考虑

问卷调查：在州 CSS 并提出在 MDN 浏览器兼容性报告
测试： 66% 通过在所有浏览器中
用法： 8%

CSS 宽高比属性

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

使用 padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

使用宽高比

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

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

为何需要优先考虑

问卷调查：在各州 CSS 提供商
测试：27% 通过在所有浏览器中
用法： 3% 和预计会增长

CSS 转换

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

</ph>

Chromium（左侧）、Gecko（中）和 WebKit（右侧）中的卡片翻转效果。 David Baron 出自 bug 的演示评论。

为何需要优先考虑

问卷调查：非常广为人知，常被用于 CSS 提供商
测试：全部 55% 通过浏览器
用法： 80%

如何贡献内容并关注他人

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

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

2021 年 Compat 信息中心 — Compat 2021 信息中心（2021 年 11 月 16 日的屏幕截图）。

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