网站平台将于 3 月推出

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

Rachel Andrew

发布时间：2026 年 3 月 31 日

稳定版浏览器

Chrome 146、Firefox 149 和 Safari 26.4 已于 3 月发布到稳定版渠道。本文将介绍本月在平台上推出的新功能。

可选的容器查询条件

Firefox 149 和 Safari 26.4 都支持不含条件的仅限名称的 @container 查询。这样一来，您就可以仅根据容器名称来匹配容器，从而更直接地根据容器上下文设置元素样式，而无需指定大小或样式限制。

滚动触发的动画

Chrome 146 新增了基于滚动位置的动画控制功能。此功能可让您使用 CSS 以声明方式创建互动，将工作分流到工作线程，并提高性能。它还包括用于 Web 动画的 JavaScript 接口。如需了解详情，请参阅即将推出 CSS 滚动触发式动画。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

trigger-scope 属性

除了滚动触发的动画之外，Chrome 146 还引入了 trigger-scope 属性。这样一来，您就可以限制动画触发器名称的可见性，从而有助于隔离动画与触发器之间的互动，并避免全局名称冲突。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

浮层 hint 值

Firefox 149 现在支持 popover 全局属性的 hint 值。值为 hint 的 popover 在显示时不会关闭 auto popover，但会关闭其他 hint popover，从而提供对 popover 行为的更精细控制。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

网格通道

Safari 16.4 支持 display: grid-lanes，这是开启砌块式布局的 display 值。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.4.

sizes 属性中的数学函数

Safari 26.4 新增了对在 <img> 元素的 sizes 属性中使用 min()、max() 和 clamp() 数学函数的支持。这为自适应图片加载提供了更大的灵活性。

JavaScript 迭代器序列

Chrome 146 和 Safari 26.4 现在都支持迭代器序列化，引入了 Iterator.concat(...items) 以通过对现有迭代器进行序列化来创建迭代器。此功能目前处于“Baseline 新近可用”阶段。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 147.
  • Safari: 26.4.

Source

CloseWatcher 接口

Firefox 149 添加了对 CloseWatcher 接口的支持。这样一来，开发者就可以使用设备原生机制（例如 Windows 上的 Esc 键或 Android 上的返回键）关闭组件，就像关闭内置对话框和弹出式窗口一样。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox Technology Preview: supported.
  • Safari: not supported.

Source

Beta 版浏览器

Beta 版浏览器可让您提前体验下一个稳定版浏览器中将包含的功能。您可以在稳定版发布之前，测试可能会影响您网站的新功能或移除的功能。本月的新 Beta 版包括 Firefox 150 和 Chrome 147。

Chrome 147 Beta 版

Chrome 147 Beta 版包含 contrast-color()，这是一个 CSS 函数，可根据哪个颜色与实参颜色形成最高对比度来返回黑色或白色。还包括 border-shape 和元素范围的视图转换。

Firefox 150 Beta 版为元素和 DocumentOrShadowRoot 添加了 CSS 关键字 revert-rule、customeElementRegistry，为图片添加了 light-dark()。