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 容器存在问题,导致图片大小不正确。
![拉伸的棋盘照片。](https://web.dev/static/blog/compat2021/image/stretched-photo-a-chessb-bb1e04823881.png?authuser=3&hl=zh-cn)
![棋盘。](https://web.dev/static/blog/compat2021/image/chessboard-85fa028fd9056.png?authuser=3&hl=zh-cn)
照片提供者:Alireza Mahmoudi。
Igalia 的 Flexbox 猫咪 这篇博文通过更多示例深入探讨了这些问题。
为何需要优先考虑
- 问卷调查:以下领域的首要问题: MDN 浏览器兼容性报告, 最知名和使用最多的 CSS
- 测试:所有浏览器均通过 85% 的测试
- 用法: 75% 的网页浏览量,在HTTP 归档
CSS 网格
CSS 网格是 现代网页布局的核心构建块,取代了许多旧技术 和解决方法。随着采用率的提高,需要稳健可靠,这样才能 浏览器之间的差异也绝不可能成为规避此影响的理由。一个是 缺少为网格布局添加动画效果的功能,Gecko 支持,但不支持 Chromium 或 WebKit。如果支持, 可以实现以下效果:
为何需要优先考虑
- 问卷调查:亚军 MDN 浏览器兼容性报告, 众所周知,但在美国 CSS
- 测试:所有浏览器通过 75%
- 用法: 8% 且稳步增长, 在 HTTP/HTTPS 搜索中, 归档
CSS 位置:sticky
固定位置 可以让内容固定在视口的边缘,通常用于 指定始终显示在视口顶部的标头。在支持的情况下 在所有浏览器中,常见用例都无法按预期运行。 例如: 粘性表格标题 不支持,但现在 支持 结果因浏览器而异:
![](https://web.dev/static/blog/compat2021/image/DtNtuWCZUNwi7GGSBPvA.png?authuser=3&hl=zh-cn)
![](https://web.dev/static/blog/compat2021/image/hJwLpLeJNfG6kVBUK9Yn.png?authuser=3&hl=zh-cn)
![](https://web.dev/static/blog/compat2021/image/od1YyD2BoBqfrnkzynUK.png?authuser=3&hl=zh-cn)
查看固定表格标题 演示。
为何需要优先考虑
- 问卷调查:在州 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 信息中心。
![2021 年 Compat 信息中心](https://web.dev/static/blog/compat2021/image/compat-2021-dashboard-99a25fe0b80b.png?authuser=3&hl=zh-cn)
我们希望浏览器供应商的共同努力, 互操作性将帮助您在 Web 上构建出色的内容!