9 月新增 Web 平台

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

Rachel Andrew

发布时间：2026 年 10 月 2 日

稳定版浏览器

这是 Chrome 和 Firefox 每两周发布一次更新的第一个月。也就是说，Chrome 153、Chrome 154、Firefox 155、Firefox 156、Firefox 157 和 Safari 27 将于 2026 年 9 月发布到稳定版渠道。本文将介绍浏览器中新增的功能，包括大量达到 Baseline Newly available 标准的功能。

progress() CSS 函数成为 Baseline

Firefox 155 新增了对 progress() CSS 数学函数的支持，使其成为 Baseline 新增功能。

progress() 函数会返回一个 <number>，表示一次计算在起始值和结束值之间的位置。通常，结果会限制在 0 和 1 之间，这使得它可用于根据容器或视口尺寸驱动流畅的尺寸调整、不透明度或颜色变化。Firefox 155 和 Safari 27 还添加了对 no-clamp 关键字选项的支持，从而允许返回的进度值低于 0 或高于 1。

.card {
  opacity: progress(100vw, 320px, 1200px);
}

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: 155.
  • Safari: 26.

Source

相对 Alpha 颜色（含 alpha()）变为基准

Firefox 155 和 Safari 27 都添加了对 CSS Color 5 中 alpha() 相对颜色函数的支持。

alpha() 函数接受一个原始颜色，并返回一个调整了 Alpha（透明度）通道的颜色，同时保留其颜色通道和颜色空间：

.overlay {
  background-color: alpha(var(--brand-color) / 50%);
}

随着 Chrome 151、Firefox 155 和 Safari 27 都支持 alpha()，此函数现在已纳入 Baseline。

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 155.
  • Safari: 27.

Source

revert-rule CSS 关键字成为 Baseline

Safari 27 添加了对 revert-rule CSS 全局关键字的支持。

revert 会将级联回滚到用户或用户代理来源，revert-layer 会回滚到之前的级联层，而 revert-rule 会将属性的值回滚到如果不存在当前样式规则时该属性的值。在 Chrome、Firefox 和现在的 Safari 27 中获得支持后，revert-rule 已成为 Baseline 新增功能。

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 150.
  • Safari: 27.

Source

light-dark() 中的 <image> 值成为基准

Safari 27 新增了对在 light-dark() CSS 函数中使用 <image> 值的支持。

以前仅限于 <color> 值，现在 light-dark() 可以根据有效浅色或深色 color-scheme 在两个图片（例如 url() 图片或 CSS 渐变）之间切换。随着 Chrome、Firefox 和 Safari 27 的支持，light-dark() 中的 <image> 值现在已纳入 Baseline 新增功能。

Browser Support

  • Chrome: 150.
  • Edge: 150.
  • Firefox: 150.
  • Safari: 27.

将 overflow-anchor 的滚动锚定设为基准

Safari 27 启用了滚动锚定功能，并添加了对 overflow-anchor CSS 属性的支持。

当可视视口上方的 DOM 发生变化时，滚动锚定功能会自动调整滚动位置，否则会导致用户在阅读或与网页互动时内容跳动。您可以使用 overflow-anchor: none 排除特定元素，使其不充当锚节点。随着 Safari 27 加入 Chrome 和 Firefox，滚动锚定功能现在已成为 Baseline 新增功能。

Browser Support

  • Chrome: 56.
  • Edge: 79.
  • Firefox: 66.
  • Safari: 27.

Source

font-width 属性和 @font-face 描述符成为基准

CSS Fonts 4 将 font-stretch 替换为 font-width，作为选择常规、紧凑或扩展字体的规范名称，同时保留 font-stretch 作为旧版别名。

Firefox 155 添加了对 font-width CSS 属性、 font-width @font-face 描述符和 CSSStyleDeclaration.fontWidth 的支持。Chrome 154 还会在 @font-face 规则中添加 font-width 描述符，并在 FontFace 对象中添加 width 属性。加上 Safari 中的现有支持，font-width 现在已进入“Baseline 新近可用”阶段。

Browser Support

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

Source

sizes="auto" 对于延迟加载的图片，变为基准

Safari 27 在使用 loading="lazy" 的 <img> 元素的 sizes 属性中添加了对 auto 关键字的支持。

当您指定 sizes="auto"（或以 auto 开头的 sizes 列表）时，浏览器会使用延迟加载图片的渲染布局宽度从 srcset 中选择最合适的图片来源。sizes="auto" 已纳入 Baseline，目前可在 Chrome、Firefox 和 Safari 27 中使用。

Browser Support

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

Source

异步迭代和可转移的 ReadableStream 对象成为 Baseline

Safari 27 包含多项针对 ReadableStream 的更新：

  • 支持使用 for await...of 循环和 ReadableStream.prototype.values() 对 ReadableStream 对象进行异步迭代。
  • 支持使用 postMessage() 在上下文之间转移 ReadableStream 对象。
  • 支持使用 ReadableStream.from() 静态方法从可迭代对象或异步可迭代对象创建 ReadableStream（Firefox 中也支持此功能）。

在 Safari 27 中，异步可迭代流和可转移的 ReadableStream 对象现在属于“Baseline 新近可用”功能。

Browser Support

  • Chrome: 124.
  • Edge: 124.
  • Firefox: 110.
  • Safari: 27.

AnimationEvent.animation 和 TransitionEvent.animation 成为 Baseline

Safari 27 为 AnimationEvent 添加了 animation 属性，为 TransitionEvent 添加了 animation 属性。

此属性会返回与 CSS 动画或过渡事件关联的 Animation 对象，从而更轻松地直接从事件监听器检查或控制动画。随着 Chrome、Firefox 和 Safari 27 支持此属性，它现在已纳入 Baseline 新增功能。

Browser Support

  • Chrome: 151.
  • Edge: 151.
  • Firefox: 152.
  • Safari: 27.

Source

cookieStore.set() 中的 maxAge 选项成为 Baseline

Safari 27 在使用 cookieStore.set() 设置 Cookie 时添加了对 maxAge 选项的支持，让您可以将 Cookie 的有效时长指定为以秒为单位的时长，而无需计算绝对 expires 时间戳。maxAge 选项现已成为 Baseline 新增功能，可在 Chrome、Firefox 和 Safari 27 中使用。

Browser Support

  • Chrome: 145.
  • Edge: 145.
  • Firefox: 148.
  • Safari: 27.

Safari 27 中的可自定义 <select>

Safari 27 新增了对使用 appearance: base-select 和 <selectedcontent> 元素自定义 <select> 菜单的支持，加入了 Chrome 的行列。

选择将 <select> 及其 ::picker(select) 伪元素纳入 appearance: base-select 会将控件切换为可设置样式的基本外观，从而允许在 <option> 元素内使用丰富的 HTML 内容，并为按钮和下拉选择器设置自定义样式。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari: 27.

Chrome 中的声明性 <camera> 和 <microphone> 元素

Chrome 153 引入了 <camera> 和 <microphone> HTML 功能元素。

在 <usermedia> 元素的基础上，<camera> 和 <microphone> 提供了专用的用户激活声明性控制，用于请求单功能视频或音频捕获访问权限，而不会在网页加载时触发脚本启动的权限提示。

Browser Support

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

JavaScript Iterator 和 Promise 添加项

Chrome 153 添加了 Iterator.prototype.join() 以及使用 Iterator.zip() 和 Iterator.zipKeyed() 的联合迭代。

Browser Support

  • Chrome: 153.
  • Edge: 153.
  • Firefox: 148.
  • Safari Technology Preview: supported.

Source

Firefox 155 实现了 Promise.allKeyed() 和 Promise.allSettledKeyed()，它们接受 promise 的字典对象，并解析为具有相同键的对象。

Browser Support

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

Source

Firefox 155 中的 WebTransport 更新

Firefox 115 扩展了其 WebTransport 实现：

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: 155.
  • Safari: 26.4.

Source

Safari 27 中的 Service Worker 静态路由 API

Safari 27 通过 InstallEvent.addRoutes() 新增了对 Service Worker 静态路由 API 的支持。

此 API 可让 Service Worker 在安装时注册声明性路由规则，以便匹配的请求可以绕过 Service Worker 启动并直接从网络或缓存中提取，从而提高导航性能。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: 27.

Source

Beta 版浏览器

Beta 版浏览器可让您预览浏览器下一个稳定版中的内容。在面向全球发布之前，您可以先测试可能会影响您网站的新功能或移除的功能。本月的新 Beta 版包括 Chrome 155、Chrome 156、Firefox 158 和 Safari 27.2。

Chrome 115 Beta 版包含 CSS margin-trim、symbols() 和 text-decoration-skip-spaces，以及 JPEG XL (image/jxl) 解码支持、文本模块导入 (import ... with { type: "text" }) 和数字凭据 API 签发支持。

Chrome 156 Beta 版包含 CSS random() 函数、CSS corner 简写属性、单轴滚动容器 scroll-snap-type: pair、image-animation 属性和 :animated-image 伪类、媒体元素状态伪类（:playing、:paused、:seeking、:buffering、:stalled、:muted、:volume-locked）、延迟模块评估 (import defer) 以及 HTML <install> 元素和 Web 安装 API。

Safari 27.2 Beta 版在与 normal 搭配使用时，增加了对 safe 和 unsafe 溢出对齐的支持；在固定位置的框和 ::picker(select) 元素上启用 safe 对齐；并将 display: grid-lanes 的 flow-tolerance 重命名为 fit-tolerance。