此页面由 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 上的兼容性一直是开发者面临的一大挑战。在过去几年中，Google 以及包括 Mozilla 和 Microsoft 在内的其他合作伙伴已经着手详细了解 Web 开发者的首要痛点，从而推动我们开展相关工作并确定各项工作的优先级，从而改善这种情况。此项目与 Google 开发者满意度 (DevSAT) 工作相关，它最初做得更广：我们在 2019 年和 2020 年推出了 MDN DNA（开发者需求评估）问卷调查，并在 2020 年 MDN 浏览器兼容性报告中进行了深入的研究工作。我们已在各种渠道中进行了额外的研究，例如 CSS 现状和 JS 状态调查问卷。

2021 年的目标是从五个重点领域消除浏览器兼容性问题，以便开发者能够信心十足地在这些问题的基础上打造可靠的基础。这项工作称为 #Compat 2021。

选择要关注的项目

虽然基本上所有网络平台都存在浏览器兼容性问题，但该项目的重点是少数大多数存在问题的领域，这些方面可以显著改善，从而消除开发者面临的首要问题。

兼容性项目使用多个标准来影响应优先考虑哪些方面，其中一些标准：

功能使用情况。例如，在所有网页浏览中，有 75% 的网页浏览量使用了 Flexbox，并且 HTTP Archive 中的采用率非常高。
bug 数量（Chromium、Gecko、WebKit 中）；对于 Chromium，这些 bug 拥有的星数。
调查结果：
- MDN DNA 调查问卷
- MDN 浏览器兼容性报告
- CSS 状况最常见和最常用的功能
来自 web-platform-tests 的测试结果。例如，flexbox on wpt.fyi。
我可以使用搜索次数最多的功能吗？

2021 年的五个重点领域

2020 年，Chromium 开始致力于解决在 2020 年提高 Chromium 的浏览器兼容性中列出的主要领域。2021 年，我们将全力以赴，更上一层楼。Google 和 Microsoft 正在与 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 网格是现代网页布局的核心构建块，取代了许多旧技术和解决方法。随着采用率不断增长，它需要稳固可靠，这样我们永远不会因不同浏览器之间存在差异而加以避免。但缺少的一个方面是为网格布局添加动画效果，Gecko 支持，但 Chromium 或 WebKit 不支持。如果支持，可产生如下效果：

Chen Hui Jing 提供的国际象棋动画演示。

为何它被列为优先事项

问卷调查：在 MDN 浏览器兼容性报告中处于亚军，众所周知，但在 CSS 状态中却不常用
测试：75% 通过所有浏览器
使用量：8%，稳定增长，HTTP Archive 略有增长

CSS 位置：粘性

粘性定位可固定在视口边缘，通常用于始终在视口顶部可见的标题。虽然所有浏览器都支持此功能，但在一些常见用例中，该功能无法按预期运行。例如，Chromium 不支持粘性表格标头。虽然现在通过标志支持，但结果在不同浏览器之间不一致：

查看 Rob Flack 的粘性表标头演示。

为何它被列为优先事项

调查问卷：在 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 转换时。例如，各浏览器之间的卡片翻转效果可能非常不一致：

Chromium（左侧）、Gecko（中间）和 WebKit（右侧）中的卡片翻转效果。 David Baron 通过 bug 评论进行演示。

为何它被列为优先事项

问卷调查：非常广为人知，适用于 CSS 现状
测试：55% 通过（所有浏览器）
用量：80%

如何贡献内容和关注他人

关注和分享我们在 @ChromiumDev 或公共邮寄名单 Compat 2021 上发布的所有最新动态。确保存在 bug，或者针对您遇到的问题提交 bug；如果还缺少任何信息，请通过上述渠道与我们联系。

web.dev 上会定期更新与进度有关的更新，您也可以在 Compat 2021 信息中心中关注每个焦点区域的进度。

我们希望各浏览器供应商共同努力提高可靠性和互操作性，这有助于您打造令人惊叹的 Web 端！