4 月新增 Web 平台

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

Rachel Andrew

发布时间：2026 年 4 月 24 日

稳定版浏览器

Chrome 147 和 Firefox 150 于 4 月发布到稳定版。本月没有 Safari 稳定版。本文将介绍本月推出的众多新功能。

contrast-color() CSS 函数成为 Baseline

随着 Chrome 147 推出 contrast-color() 函数，这项实用的无障碍功能现已在所有主流引擎中提供，成为“Baseline 新近可用”功能。

此函数接受一个颜色值，并返回黑色或白色，具体取决于哪种颜色与所提供的颜色对比度最高。这有助于确保文本满足无障碍对比度要求。

Browser Support

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

Source

滚动条驱动的动画范围属性现在是基准

Firefox 150 支持 animation-range-start 和 animation-range-end 属性，以及 animation-range 简写形式。这使得这些属性成为“Baseline 新近可用”属性。

借助这些属性，您可以控制动画在滚动驱动的动画时间轴上的开始和结束位置。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: not supported.
  • Safari: 26.

Source

ariaNotify() 方法

Firefox 150 引入了对 Document 和 Element 上 ariaNotify() 方法的支持。此方法允许内容作者将要由屏幕阅读器朗读的文本字符串排入队列。

这为 ARIA 实时区域提供了一种更可靠且符合人体工程学的替代方案，尤其适用于与 DOM 更新无关的公告。

Browser Support

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

Source

延迟加载图片的自动尺寸

Firefox 150 现在支持 <img> 元素的 sizes 属性的 "auto" 关键字。这样，延迟加载的图片便可使用计算出的图片布局大小从 srcset 中选择最佳来源，从而简化自适应图片设置。

Browser Support

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

Source

元素范围内的视图过渡

Chrome 147 在任意 HTML 元素上公开了 element.startViewTransition()。 这样一来，转换就可以限定在特定元素的范围内，这意味着伪元素会受到祖先剪辑和转换的影响，并且可以同时运行多个转换。

CSS border-shape 属性

Chrome 147 引入了 border-shape 属性，可让您创建非矩形边框，例如多边形或圆形边框。

SVG <textPath> 路径属性

Chrome 147 在 SVG <textPath> 元素上添加了对 path 属性的支持，让您可以内联定义文本路径几何图形。

Browser Support

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

针对 JSON 和样式的 modulepreload 支持

Chrome 147 新增了对 JSON 和样式模块类型的支持，可作为 <link rel="modulepreload"> 目的地。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: 26.2.

Math.sumPrecise

Chrome 147 实现了 TC39 关于 Math.sumPrecise 的提案，可返回迭代器中值的精确总和。此方法现已归类为“Baseline 新近可用”。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 137.
  • Safari: 26.2.

Source

Beta 版浏览器

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

Chrome 148 Beta 版包含 CSS 中的仅限名称的容器查询、视频和音频元素的延迟加载，以及 @supports 中用于功能检测的 at-rule() 函数。

Firefox 151 Beta 版包含 CSS 容器样式查询。

Safari 26.5 Beta 版支持 <details>、<dialog>、<select> 和 <input> 元素上的 :open 伪类，并修复了大量问题。