2023 年,所有主流浏览器供应商和其他利益相关者再次携手合作,解决最突出的浏览器兼容性问题。
2023 年,所有主流浏览器供应商和其他利益相关者再次携手合作,解决最突出的浏览器兼容性问题。这项工作始于 2022 年的 Interop,您可以在年终总结帖子中了解我们共同取得的成就。每位参与者都相信这将有助于改善各地 Web 开发者的体验。今年,我们首次公开宣布了 提案流程,并收到了来自框架、大型公司、浏览器供应商和各地开发者的许多出色建议。
Interop 2023 的重点领域
这一次,我们有不下 26 个重点领域,我们的项目文档中详细概述了这些领域。它们按字母顺序列出:
- CSS 中的边框图像
- CSS 中的颜色空间和函数
- CSS 中的容器查询
- CSS 中的 Containment
- CSS 伪类
- CSS 中的自定义属性
- Flexbox
- 字体功能检测和 调色板
- 表单
- Grid
- :has()
- Inert
- CSS 中的遮罩
- CSS 中的数学函数
- 媒体查询
- Web Worker 中的模块
- CSS 动画中的运动路径
- Offscreen Canvas
- 指针和鼠标事件
- URL
- Web Compat 2023:用于解决导致已知站点兼容性问题的小错误的综合重点领域
- Web Codecs(视频)
- Web Components
您可以在 Web Platform Tests 上找到所有重点领域的完整详细信息,这些信息基于 MDN Web Docs,但以下是我们认为您可能会真正感到兴奋的几个领域。
容器查询
多年来,容器查询一直是开发者 最迫切的需求,Chrome 和 Safari 已于 2022 年发布。Firefox 预计将在 Firefox 110 中发布容器查询,此重点领域的测试有助于确保容器查询在跨浏览器和根据规范的情况下可靠地工作。
:has(…)
长期以来,开发者一直要求在 CSS 中使用父选择器。:has()
伪类使得父选择器的许多用例成为可能,以及相对于参考元素选择先前的兄弟元素。例如,这使得可以对带有标题的 figure 和不带标题的 figure 应用不同的样式。要详细了解 has()
的用例,请参阅 ":has(),家族选择器"。
自定义属性
CSS 自定义属性(也称为 CSS 变量)使得可以在样式表中定义一个值并在许多位置重复使用该值,从而减少重复。例如,您可以在样式表中定义一个通用颜色或字体大小,并在组件中通用此颜色或字体大小。长期以来,浏览器中一直存在对自定义属性的基本支持。Interop 2023 侧重于 @property
at-rule。@property
表示样式表中的自定义属性注册,允许进行属性类型检查、设置默认值以及属性是否应继承值。要了解更多信息,请参阅 @property:为 CSS 变量赋予超能力。
CSS 遮罩
CSS 遮罩提供了使用 CSS 应用图像效果的方法,例如您可能在图形应用程序中看到的效果。对各种遮罩属性的支持参差不齐,使得遮罩比应有的更难使用。此重点领域将帮助开发者自信地跨浏览器使用创意效果。要详细了解将效果应用于图像的信息,请参阅这篇关于图像遮罩的文章。
OffscreenCanvas
<canvas>
元素和 Canvas API 提供了一种可通过脚本方式将图形绘制到屏幕上的方法。但是,这可能会导致性能问题,因为工作与用户交互在同一线程上完成。OffscreenCanvas 为开发者提供了一个与 DOM 和 Canvas API 解耦的画布。开发者还可以在 Web Worker 中运行渲染任务,与主线程分离。要详细了解 OffscreenCanvas 的性能优势。
指针和鼠标事件
当使用鼠标、笔、触控笔或触摸屏与页面交互时,会触发指针事件。使用鼠标时会触发鼠标事件,但出于历史原因,触摸也会触发鼠标事件。此重点领域涵盖指针和鼠标与页面交互的行为,包括它们如何与命中测试和滚动区域交互。由于此领域缺少 Web Platform Tests,因此 2023 年的重点领域不包括触摸和触控笔。
WebCodecs
WebCodecs API 为开发者提供了访问视频的各个帧和音频块的方法。它提供了对浏览器中已有的编解码器的访问权限,以及与它们交互的各种接口。文章使用 WebCodecs 进行视频处理展示了如何使用 API 解码各个帧并将它们渲染到画布。
Web Components
Web Components 是用于创建可重用组件(例如 Custom Elements 和 Shadow DOM)的许多技术的总称。Interop 2023 将侧重于提高这些基础技术的互操作性。
仪表板
在 Interop 2023 仪表板上关注全年的进度,您可以在其中查看当前分数以及所有主流浏览器引擎中解决这些重点领域的状况。

重点领域分数根据测试通过率计算。如果您有反馈或想要为 WPT 贡献改进,请提交 issue 以请求更新用于评分的测试集。
