5 月新增 Web 平台

了解 2026 年 5 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

Rachel Andrew

发布时间：2026 年 5 月 29 日

稳定版浏览器

Chrome 148、Firefox 151 和 Safari 26.5 在 5 月发布到稳定版。本文将介绍本月推出的众多新功能。

注意：这些帖子中包含从 MDN 提取的浏览器兼容性数据，这些数据可能尚未针对最新的浏览器版本进行更新。一旦 browser-compat-data 版本中显示相应信息，相应帖子就会显示正确的信息。

:open CSS 伪类成为 Baseline

Safari 26.5 主要发布了对现有功能的修复。 不过，它还支持 :open 伪类，因此该功能成为 Baseline 新近可用的功能。

借助 :open 伪类，您可以为处于“打开”和“关闭”状态的元素设置样式。这适用于打开状态下的 <details> 和 <dialog> 等元素，以及显示选择器界面时的 <select> 和 <input> 元素（例如颜色或日期选择器）。与使用 details[open] 等属性设置样式相比，这种方式更简洁且更具语义化。

Browser Support

• 133
• 133
• 136
• 26.5

Source

仅限名称的 CSS 容器查询成为 Baseline

随着 Chrome 148 于本月发布，仅限名称的容器查询现已进入“Baseline 新近可用”阶段。

以前，在编写容器查询时，您需要指定大小或样式查询条件以及容器名称，并使用 container-type 属性确定容器的类型。现在，您只需按名称查询命名容器是否存在，而无需任何其他条件。此外，如果您仅按名称进行查询，则不再需要在祖先上设置 container-type：

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

• 148
• 148
• 149
• 26.4

针对自定义属性的容器样式查询成为基准

Firefox 151 引入了对 @container 上 style() 查询的支持，使自定义属性的容器样式查询成为新的基准。

借助容器样式查询，您可以根据父容器的 CSS 属性为元素应用样式。虽然尺寸查询功能非常强大，但样式查询可让您查询非尺寸特征。具体而言，此版本全面支持跨浏览器查询自定义属性。例如，您可以检查父容器上的自定义属性 --theme 是否设置为 dark：

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

• 111
• 111
• 151
• 18

视频和音频元素的延迟加载

Chrome 148 为具有 loading="lazy" 属性的 <video> 和 <audio> 元素引入了原生延迟加载功能。

与 <img> 和 <iframe> 元素一样，您现在可以指示浏览器延迟加载媒体资源，直到这些资源接近视口时才加载。这有助于提高网页加载性能、节省带宽并减少用户的流量消耗。如需详细了解，请参阅实现此功能的团队撰写的如何在当今的网络上使用标准 HTML 视频和音频延迟加载。

Browser Support

• 148
• 148
• x
• x

Source

文档画中画 API

Firefox 151 在桌面平台上引入了对 Document Picture-in-Picture API 的支持。

与标准的画中画 API 不同，后者允许您在始终位于顶部的窗口中查看 <video> 元素，而文档画中画 API 允许您打开包含任意 HTML 内容的始终位于顶部的窗口。这样一来，即使在离开网页后，也能继续显示丰富的互动叠加层，例如视频会议参与者网格、互动股票行情显示器或计时器。

Browser Support

• 116
• 116
• 151
• x

Source

Web Serial API 扩展了平台支持

Firefox 151 在桌面平台上新增了对 Web Serial API 的支持，而 Chrome 148 在 Android 上新增了对该 API 的支持。

Web Serial API 为网站提供了一种对串行设备（例如微控制器、3D 打印机、开发板和外围硬件）执行读写操作的方式。在 Firefox 中，使用 Web Serial API 需要用户安装合成生成的网站权限插件，以确保安全且受控的访问管理机制。

Browser Support

• 89
• 89
• 151
• x

Source

Beta 版浏览器

Beta 版浏览器可让您抢先体验下一个稳定版浏览器中的功能。在面向全球发布之前，您可以趁此机会测试可能会影响您网站的新功能或移除的功能。本月的新 Beta 版包括 Chrome 149 和 Firefox 152。本月没有 Safari Beta 版。

Chrome 149 Beta 版包含令人兴奋的 CSS 更新，例如 CSS 间隙装饰，可让您设置 flex 和网格项之间的空白（间隙）样式。它还支持 path() 和 shape()，以及 shape-outside 属性中的 rect() 和 xywh() 基本形状函数，以及作为 CSS 属性的 path-length。在 API 方面，scrollTo()、scrollBy() 和 scrollIntoView() 等程序化滚动方法现在会在平滑滚动完成时返回已解决的 Promise，并且具有有效 WebSocket 连接的网页现在可以符合后退/前进缓存 (BFCache) 的条件。

Firefox 152 Beta 版全面支持 field-sizing 属性，该属性可让表单控件自动调整大小以适应其内容。它还向 Notification 接口添加了 actions 和 maxActions 属性，并在 Element.getAnimations() 中添加了 options.pseudoElement 支持。