6 月新增 Web 平台

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

Rachel Andrew

发布时间：2026 年 6 月 30 日

稳定版浏览器

Chrome 149、Chrome 150 和 Firefox 152 于 6 月发布到稳定版。本月没有 Safari 稳定版发布。本文将介绍网页浏览器中即将推出的新功能。

使用 field-sizing 调整表单控件大小成为基准

Firefox 152 引入了对 field-sizing CSS 属性的支持，从而使表单控件能够自动调整大小。此功能已在所有主要浏览器引擎中推出。

借助 field-sizing 属性，<textarea>、<input> 和 <select> 等表单控件可以动态缩小或放大以适应其内容 (field-sizing: content)，而不是保持默认大小 (field-sizing: fixed) 不变。这样一来，在构建随用户输入而调整大小的文本输入或文本区域时，就不需要使用 JavaScript 解决方法了。

textarea {
  field-sizing: content;
}

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 152.
  • Safari: 26.2.

Source

shape-outside 中的基本形状 rect() 和 xywh() 成为 Baseline

Chrome 149 在 shape-outside 属性中支持 rect() 和 xywh() 形状函数，因此这些基本形状现在已成为 Baseline，可在主要浏览器中使用。

借助 rect() 和 xywh() 函数，您可以使用精确的边衬区坐标或原点和尺寸语法来定义矩形浮动排除区域。与使用 polygon() 包装矩形浮动形状相比，这种方法可提供更简单、更易读的语法。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: 149.
  • Safari: 17.2.

Source

使用 CSS 自动缩放字体 text-fit

Chrome 150 引入了 text-fit CSS 属性，可让开发者自动缩放字号，以适应包含框的宽度。

.headline {
  text-fit: grow;
}

CSS 间隙装饰

Chrome 149 引入了对网格和 Flexbox 布局中 CSS 间隙装饰的支持。借助间隙装饰器，您可以直接向网格和 flex 项之间的间距添加线条和样式，类似于多列布局中的 column-rule。

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

如需了解详情，请参阅间隙装饰：现已在 Chromium 中推出。

Browser Support

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

CSS background-clip: border-area

Chrome 150 新增了对 CSS 背景级别 4 中的 background-clip: border-area 的支持。

此值会将元素背景剪裁到边框区域，让您无需额外的封装元素或伪元素即可创建自定义渐变边框、装饰性框架边缘和动画边框效果。

Browser Support

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

程序化滚动承诺

Chrome 150 更新了程序化滚动方法（scrollTo()、scrollBy() 和 scrollIntoView()），以返回 Promise。

当流畅滚动动画完成时，返回的 promise 会解析，从而为在滚动稳定后触发后续操作提供可靠的信号。

使用 focusgroup 进行声明式键盘导航

Chrome 150 引入了对 focusgroup 属性的支持。

借助 focusgroup 属性，开发者可以声明式地管理复合界面控件（如工具栏、标签页列表和菜单）之间的箭头键导航，而无需手动编写键盘事件监听器。

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

如需了解详情，请参阅 Focusgroup 说明。

在往返缓存 (bfcache) 中支持 WebSocket

在 Chrome 149 中，具有有效 WebSocket 连接的网页现在可以进入往返缓存 (bfcache)。

之前，如果 WebSocket 连接处于打开状态，网页就无法储存至往返缓存。现在，浏览器会在进入 bfcache 时自动关闭活跃的 WebSocket 连接，从而允许网页在返回时被缓存并立即恢复。

资源时间轴中的临时响应和标头响应时间

Firefox 152 在 PerformanceResourceTiming 接口上添加了对 firstInterimResponseStart 和 finalResponseHeadersStart 的支持。

这些指标可用于分别衡量浏览器在发送请求后接收到临时 HTTP 响应和最终 HTTP 响应所花费的时间。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 152.
  • Safari: 26.4.

Source

通知的操作按钮

Firefox 152 新增了对使用 Notification 上的 actions 属性和 ServiceWorkerRegistration.showNotification() 中的选项的通知操作按钮的支持。

您现在可以在操作系统通知中添加操作按钮，并在用户点按按钮时监听用户互动。

Browser Support

  • Chrome: 53.
  • Edge: 18.
  • Firefox: 152.
  • Safari: not supported.

Source

Beta 版浏览器

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

Firefox 153 Beta 版引入了对以下功能的支持：Error.stackTraceLimit 用于配置捕获的堆栈轨迹的最大深度；IDBObjectStore.getAllRecords() 和 IDBIndex.getAllRecords() 用于检索已编入索引的记录；RTCDtlsTransport.getRemoteCertificates() 用于 WebRTC 安全检查。插件开发者还可以使用新的 publicSuffix API 和 userScripts.execute() 方法按需注入脚本。

Safari 27 Beta 版引入了以下功能：可感知转换的锚点定位、用于匹配标题元素的 :heading 伪类、用于回滚级联层的 revert-rule 关键字、对盒大小调整中的 stretch 关键字的支持，以及 :host:has() 复合选择器。