Google 正与其他浏览器供应商和行业合作伙伴合作，解决 Web 开发者面临的五大浏览器兼容性问题：CSS flexbox、CSS Grid、position: sticky、aspect-ratio 和 CSS transform。
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 容器存在问题，导致图片大小不正确。
<ph type="x-smartling-placeholder">照片提供者：Alireza Mahmoudi。
Igalia 的 Flexbox 猫咪 这篇博文通过更多示例深入探讨了这些问题。
为何需要优先考虑
- 问卷调查：以下领域的首要问题： MDN 浏览器兼容性报告， 最知名和使用最多的 CSS
- 测试：所有浏览器均通过 85% 的测试
- 用法： 75% 的网页浏览量，在HTTP 归档
CSS 网格
CSS 网格是 现代网页布局的核心构建块，取代了许多旧技术 和解决方法。随着采用率的提高，需要稳健可靠，这样才能 浏览器之间的差异也绝不可能成为规避此影响的理由。一个是 缺少为网格布局添加动画效果的功能，Gecko 支持，但不支持 Chromium 或 WebKit。如果支持， 可以实现以下效果：
为何需要优先考虑
- 问卷调查：亚军 MDN 浏览器兼容性报告， 众所周知，但在美国 CSS
- 测试：所有浏览器通过 75%
- 用法： 8% 且稳步增长， 在 HTTP/HTTPS 搜索中， 归档
CSS 位置：sticky
固定位置 可以让内容固定在视口的边缘，通常用于 指定始终显示在视口顶部的标头。在支持的情况下 在所有浏览器中，常见用例都无法按预期运行。 例如： 粘性表格标题 不支持，但现在 支持 结果因浏览器而异：
查看固定表格标题 演示。
为何需要优先考虑
- 问卷调查：在州 CSS 并提出 在 MDN 浏览器兼容性报告
- 测试： 66% 通过 在所有浏览器中
- 用法： 8%
CSS 宽高比属性
新的
aspect-ratio
CSS 属性可让您轻松地为
因此，您无需使用众所周知的
padding-top 技巧：
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
由于这是一个常见的用例，因此预计会得到广泛使用， 我们希望确保它在所有常见场景下和各种浏览器中都可靠。
为何需要优先考虑
- 问卷调查：在各州 CSS 提供商
- 测试：27% 通过 在所有浏览器中
- 用法： 3% 和 预计会增长
CSS 转换
CSS 转换 多年来一直支持所有浏览器，并广泛应用于 。然而，仍有许多方面它们的工作原理不尽相同 尤其是动画和 3D 转换功能。例如，某张卡 翻转效果在不同浏览器之间可能会非常不一致：
为何需要优先考虑
如何贡献内容并关注他人
关注并分享我们发布的任何最新动态 @ChromiumDev 或公共邮寄名单、 与 2021 年兼容。确保存在错误，或者 提交报告，解决您遇到的问题 如有任何缺失，请通过上述 渠道。
我们会在 web.dev 上定期更新进展情况， 在 Compat 2021 信息中心。
我们希望浏览器供应商的共同努力， 互操作性将帮助您在 Web 上构建出色的内容！