2024 年 10 月，全新 Web 平台推出

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

Rachel Andrew

发布时间：2026 年 10 月 29 日

稳定版浏览器

Chrome 155、Chrome 156、Firefox 158、Firefox 159、Safari 27.1 和 Safari 27.2 于 2026 年 10 月发布到稳定版。本文将介绍本月在各个浏览器中推出的新功能，其中几项主要功能已达到“新近可用”基准。

滚动驱动的动画成为 Baseline 功能

Firefox 159 默认启用滚动驱动的动画。

借助滚动条驱动的动画，您可以使用 scroll-timeline 和 scroll() 函数将 CSS 动画或 Web Animations API 动画的进度关联到滚动容器的滚动偏移量，或者使用 view-timeline 和 view() 函数（通过 animation-timeline 分配）将 CSS 动画或 Web Animations API 动画的进度关联到元素在其滚动条中的可见性：

随着 Chrome、Safari 以及现在的 Firefox 159 的支持，滚动驱动动画已成为基准新推出的功能。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 159.
  • Safari: 26.

Source

请参阅滚动驱动的动画：基准新近可用之路，并滚动时间轴，探索滚动驱动的动画如何从 2014 年初的提案演变为在每个核心浏览器引擎中发布的互操作性 Web 标准。

限定范围的自定义元素注册表成为 Baseline

Firefox 159 添加了对限定范围的自定义元素注册表的支持。

以前，所有自定义元素都必须在单个全局 window.customElements 注册表中注册，这可能会在组合来自不同库或团队的组件时导致命名冲突。现在，您可以使用 CustomElementRegistry() 构造函数创建独立的 CustomElementRegistry 实例，并将其定义范围限定为特定的 shadow tree。customElementRegistry 属性也可用于 Document、Element 和 ShadowRoot。

随着 Chrome、Safari 和 Firefox 159 的支持，限定范围的自定义元素注册表现在已纳入新近可用的基准。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: 159.
  • Safari: 26.

Source

JPEG XL 图片支持

Chrome 155 和 Firefox 158 默认支持 JPEG XL (image/jxl) 图片格式。

JPEG XL 是一种免版税的光栅图片格式，已标准化为 ISO/IEC 18181。它支持有损和无损压缩、渐进式解码、广色域、高动态范围 (HDR)、高位深、透明度和动画，以及现有 JPEG 文件的无损转码。Firefox 158 还更新了图片请求的默认 HTTP Accept 标头，以包含 image/jxl。

如需了解详情，请参阅在 Chrome 中发布 JPEG XL。

Browser Support

  • Chrome: 155.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 17.

Source

CSS 类型化算术成为 Baseline 功能

Firefox 158 在 calc() 等数学函数中添加了对 CSS 类型化算术的支持。

CSS 类型化算术允许您将两个具有相同数据类型的值相除（即使它们使用不同的单位），从而生成无单位的 <number> 商。您可以直接在接受数字的属性（例如 opacity 或 line-height）中使用该无单位结果，也可以将其乘以另一个单位以在不同类型之间进行转换：

随着 Firefox 158 加入 Chrome 和 Safari 的支持行列，CSS 类型化算术现已纳入新近可用的基准。

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: 158.
  • Safari: 26.

PerformanceResourceTiming.deliveryType

Firefox 158 添加了对 PerformanceResourceTiming.deliveryType 属性的支持。

此属性指示资源的传送方式，例如，当资源从缓存中传送时，返回 "cache"。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 158.
  • Safari: 26.4.

Source

random() CSS 函数

Chrome 156 添加了对 random() CSS 函数的支持。

random() 函数在指定的最小值和最大值范围内生成一个随机数值，并可选择步长间隔。默认情况下，每个 random() 调用都会解析为一个不同的随机值，或者您可以传递 <random-key> 作为第一个参数，以便在属性或元素之间共享随机值：

请参阅 Smashing Magazine 上的 Embracing playful imperfection with the CSS random() function（使用 CSS 函数拥抱不完美）一文中的示例。

Browser Support

  • Chrome: 156.
  • Edge: 156.
  • Firefox Technology Preview: supported.
  • Safari: 26.2.

Source

margin-trim CSS 属性

Chrome 155 在块容器和多列容器上添加了对 margin-trim CSS 属性的支持。

您可以在容器上使用 margin-trim，以省略其子元素与容器边缘相交处的边距，从而避免在第一个子元素之前或最后一个子元素之后出现额外间距，而无需 :first-child 或 :last-child 替换。

如需了解详情，请参阅使用 margin-trim 属性移除起始和结束外边距。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: not supported.
  • Safari: 16.4.

Source

使用 symbols() CSS 函数内嵌计数器样式

Chrome 155 引入了对 symbols() CSS 函数的支持。

借助 symbols() 函数，您可以直接在 list-style-type、list-style 简写、counter() 或 counters() 中定义匿名计数器样式，而无需声明单独的命名 @counter-style at 规则。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 35.
  • Safari Technology Preview: supported.

Source

text-decoration-skip-spaces CSS 属性

Chrome 155 添加了 text-decoration-skip-spaces CSS 属性，用于控制文本修饰线（如下划线、上划线和删除线）是否跳过空白字符。这样，您就可以防止在开头、结尾或字词间距下绘制装饰。

Browser Support

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

:navigation-source CSS 伪类

Chrome 156 引入了 :navigation-source CSS 伪类。它会匹配发起导航的链接、按钮或表单元素，并在整个导航过程中保持该元素处于选中状态。

Browser Support

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

JavaScript 文本模块导入和重试失败的模块加载

Chrome 155 增加了对使用 import ... with { type: "text" } 导入文本模块的支持，Firefox 也支持此功能。type: "text" 导入属性会将目标模块的内容加载为 JavaScript 字符串。

Browser Support

  • Chrome: 155.
  • Edge: 155.
  • Firefox: 153.
  • Safari: not supported.

Source

Chrome 156 还更新了模块加载行为，因此失败的模块加载不会再永久缓存。应用现在可以重试失败的模块加载，例如，在发生临时网络故障后再次调用 import()。

Chrome 和 Firefox 中的 WebTransport 更新

Firefox 158 和 Chrome 156 都扩展了 WebTransport：

Firefox 158 添加了 WebTransport.getStats() 方法来检索连接和数据报统计信息，并添加了静态 WebTransport.supportsReliableOnly 属性来指示浏览器是否支持通过完全可靠的传输进行 WebTransport 会话。

Browser Support

  • Chrome: 157.
  • Edge: 157.
  • Firefox: 158.
  • Safari: 26.4.

Source

Chrome 156 新增了对以下操作的支持：在初始 CONNECT 握手期间在 WebTransportOptions 中传递自定义 HTTP 请求标头，以及从 WebTransport 实例中读取服务器响应标头。

Firefox 中的Notification navigate选项

Firefox 158 增加了对 Notification() 构造函数和 ServiceWorkerRegistration.showNotification() 中的 navigate 选项以及 Notification.navigate 属性的支持，Safari 也是如此。此选项可指定一个网址，供浏览器在用户点击系统通知时导航到该网址。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 158.
  • Safari: 18.5.

Source

Firefox 中的 HTML Sanitizer API 更新

Firefox 158 向 HTML Sanitizer API 添加了 javascriptURLs 配置选项和 Sanitizer.setJavascriptURLs()，用于控制在使用不安全的 HTML 插入方法（例如 Element.setHTMLUnsafe()）时，是否移除包含 javascript: 网址的属性。

Browser Support

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

Firefox 159 还更新了安全清理方法（例如 Element.setHTML()），以便在解析期间（而不是在构建 DOM 树之后）剥离不需要的元素和属性，从而确保相邻文本保留在单个文本节点中。

在 Safari 中将 flow-tolerance 重命名为 fit-tolerance

Safari 27.2 将网格通道布局 (display: grid-lanes) 的 flow-tolerance 属性重命名为 fit-tolerance，同时保留 flow-tolerance 作为已废弃的别名。

Browser Support

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

Beta 版浏览器

通过 Beta 版浏览器，您可以预览下一个稳定版浏览器中将包含的功能。在向全球发布新版本之前，您可以测试可能会影响您网站的新功能或移除的功能。本月的新 Beta 版包括 Chrome 157、Chrome 158 和 Firefox 160。

Chrome 157 Beta 版包含 CSS corner 简写和边缘子简写，用于同时设置 border-radius 和 corner-shape、text-decoration-inset、text-overflow: <string> 以及 position-visibility: anchor-valid 和 anchor-visible。它还包括 HTML-in-canvas 渲染支持，以及 <camera>、<microphone> 和 <geolocation> 功能元素的仅图标 displaymode 属性。

Chrome 158 Beta 版引入了声明式 HTML <install> 元素和 Web Install API (navigator.install())，用于跨域 Web 应用安装。CSS 和 SVG 新增功能包括 ::highlight(*) 通用自定义亮点选择器、媒体元素状态伪类（:playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked）、flow-start 和 flow-end 对齐关键字，以及 circle() 和 ellipse() 基本形状的 closest-corner 和 farthest-corner 半径。

Firefox 160 Beta 版更新了 WebExtensions runtime.PlatformInfo API，在 ARM64 平台上将 arch 作为 arm64（而非 aarch64）返回，从而与 Chrome 保持一致。