Microsoft Edge 150 Web 平台发行说明 (2026 年 7 月)

以下是 2026 年 7 月 2 日发布的 Microsoft Edge 150 中的新 Web 平台功能和更新。

若要保持最新状态并获取最新的 Web 平台功能，请下载Microsoft Edge (Beta、Dev 或 Canary) 的预览频道;转到 成为Microsoft Edge 预览体验成员。

详细内容：

• Microsoft Edge DevTools
• WebView2
• CSS 功能
  • AccentColor 和 AccentColorText 系统颜色
  • 允许可选的舍入参数 polygon()
  • 可动画缩放
  • CSS URL 请求修饰符
  • CSS text-fit 属性
  • Css background-clip: border-area
  • CSS image(<color>) 函数
  • 包含图像值的 CSS light-dark()
  • 逗号分隔的容器查询
  • 通过 CSS 公开不可打印的区域
  • Media 元素伪类
  • CSS alpha() 函数
  • named-feature() function for CSS @supports
  • overscroll-behavior: chain
  • flex-wrap:balance
• HTML 功能
  • focusgroup 属性
  • popover="hint" 属性行为更改
  • 更新可自定义项中的所有 <selectedcontent> 元素 <select>
  • 无序流式处理 HTML
• Web API
  • FontFaceSet全局公开接口
  • 对跨源 iframe 和插件禁用 SVG 筛选器
  • MediaStreamTrackProcessor 帧计数器
  • URL 的 data: 不透明源
  • PWA 源迁移
  • 当 和 scrollTo 方法完成时scrollBy收到通知
  • Web 语音 API：设备上的识别质量
  • WebGPU：即时
• 源试用版

Microsoft Edge DevTools

请参阅 Microsoft Edge DevTools 中的新增功能。

WebView2

请参阅 WebView2 SDK 的发行说明。

CSS 功能

Microsoft Edge 中包括以下新的级联样式表 (CSS) 功能。

AccentColor 和 AccentColorText 系统颜色

AccentColor和 AccentColorText 系统颜色现可用作 CSS 颜色值，以访问在用户设备上指定的系统主题色。

另请参阅：

• MDN 处的系统颜色>。<
• CSS 颜色模块级别 4 中的系统颜色。

允许可选的舍入参数 polygon()

允许 CSS 形状函数中的polygon()可选round参数。 可以指定一个长度值来圆多边形角，而无需手动计算贝塞尔曲线。

例如，创建圆角三角形： polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

另请参阅：

• CSS 多边形 () 圆形操场 - 交互式演示。
• [css-shapes] 允许多边形的可选舍入参数 () #9843 - CSS 工作组问题。

可动画缩放

CSS zoom 属性可以进行动画处理，并将其内插为 <number>。 可以对缩放进行过渡和动画处理，以平滑缩放元素及其布局，从而补充现有的基于转换的缩放。

另请参阅：

• zoom MDN 的 CSS 属性。

CSS URL 请求修饰符

以下 CSS 函数可与 CSS url() 函数一起使用，以控制所引用资源的提取行为：

• cross-origin()
• integrity()
• referrer-policy()

例如， background-image: url("image.png" cross-origin(anonymous)) 使用 CORS 匿名模式提取图像。

这让你可以精细地控制 CSS 加载资源的跨源访问、子资源完整性和引用策略，包括：

• 图像。
• 字体。
• SVG 引用。
• 导入的样式表。

另请参阅：

• <MDN 中的 url> CSS 类型 。
• 请求 CSS 值和单元模块级别 5 中的 URL 修饰符。

CSS text-fit 属性

CSS text-fit 属性缩放文本节点的字号，使其完全适合其包含框的宽度。

此属性允许确保标题或动态内容填充可用的水平空间，而无需手动计算字号或复杂的 JavaScript 解决方法。

此属性为响应式排版提供了可靠的 CSS 原生解决方案，可跨不同屏幕大小和不同的文本长度保持视觉对齐。

另请参阅：

• 文本拟合：text-fitCSS 文本模块级别 4 中的 属性。

Css background-clip: border-area

CSS background-clip: border-area 属性将元素的背景剪裁到其边框笔划绘制的区域，同时忽略 border-widthborder-style 的 border-color透明度。

这将启用不带 的 border-image渐变边框。

另请参阅：

• background-clip MDN 的 CSS 属性。

CSS image(<color>) 函数

CSS image() 函数使你能够轻松地从任何颜色生成纯色图像。

例如，若要创建纯红色背景图像，请使用 background: image(red);。

另请参阅：

• <MDN 处的图像> CSS 类型 。
• 图像回退和注释：image()CSS 图像模块级别 4 中的表示法。

包含图像值的 CSS light-dark()

CSS light-dark() 函数现在接受图像值 (url()、 image-set()none) 。

这样就可以根据用户的首选配色方案在图像之间自动切换。

可以将 函数与以下属性中的图像值配合使用 light-dark() ：

• background-image
• list-style-image
• border-image-source
• cursor
• content

另请参阅：

• light-dark() MDN 处的 CSS 函数。

逗号分隔的容器查询

规则 @container 现在支持多个容器查询，用逗号分隔。 如果至少有一个查询匹配，则 @container 应用规则。

这样，就可以对所有浏览器不支持的功能进行回退查询。

示例：

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

另请参阅：

• MDN 处的 CSS 容器系列。

通过 CSS 公开不可打印的区域

使用 CSS page-margin-safety 属性可避免尝试打印到一张纸的不可打印区域。

打印机通常在每个纸的四个边缘都有一个小面积，打印机无法可靠地标记，这通常是由于打印机的纸张处理机制。

默认页边距应大于这些纸边区域，但如果你在应用中设置了边距，并且想要 (添加 @page 边距框，例如自定义页眉和页脚) ，则 page-margin-safety 属性提供了一种检测打印安全位置的方法。

另请参阅：

• 保持在可打印区域：page-margin-safetyCSS 分页媒体模块级别 3 中的 属性。

Media 元素伪类

以下 CSS 伪类根据其状态匹配 <audio> 和 <video> 元素：

• :playing
• :paused
• :seeking
• :buffering
• :stalled
• :muted
• :volume-locked

另请参阅：

• MDN 处的 CSS 伪类。:playing
• MDN 处的 CSS 伪类。:paused
• MDN 处的 CSS 伪类。:seeking
• MDN 处的 CSS 伪类。:buffering
• MDN 处的 CSS 伪类。:stalled
• MDN 处的 CSS 伪类。:muted
• MDN 处的 CSS 伪类。:volume-locked

CSS alpha() 函数

CSS alpha() 函数通过将指定的 alpha 值应用于现有颜色来创建新颜色。

例如， alpha(from red / 0.5) 创建不透明度为 50% 的半透明红色。

另请参阅：

• CSS 颜色模块级别 5 中的相对 Alpha 颜色。

named-feature() CSS 函数 @supports

函数 named-feature() 允许 CSS @supports 规则查询一小组特定的命名特征，这些功能无法使用其他 @supports 机制进行测试，但对测试很有价值。

另请参阅：

• CSS 条件规则模块级别 5 中规则的扩展。@supports

overscroll-behavior: chain

overscroll-behavior CSS 属性现在支持 chain 值。

此属性影响两个独立效果：

• 滚动传播。
• 局部边框效果 (，例如过度滚动拉伸) 。

以前 有 overscroll-behavior 三个值：

• none：无传播，无局部效果。
• auto：传播、局部效果。
• contain：无传播，局部效果。

此功能添加一个新值以完成设置：

• chain：传播，无局部效果。

另请参阅：

• overscroll-behavior MDN 的 CSS 属性。
• CSS 超标行为模块级别 1 中的过度滚动行为属性。

flex-wrap:balance

flex-wrap:balance 允许在每个 flex-line之间分发内容，以便布局看起来更平衡。

这类似于 text-wrap:balance。

另请参阅：

• flex-wrap MDN 的 CSS 属性。
• 弹性换行：flex-wrapCSS 灵活框布局模块级别 2 中的 属性。

HTML 功能

Microsoft Edge 中包含以下新的 HTML 功能。

focusgroup 属性

HTML focusgroup 属性标准化复合小组件（如工具栏、选项卡、菜单和单选按钮组）的键盘导航。

属性 focusgroup 自动处理以下事项，而无需自定义 JavaScript 代码：

• roving tabindex 行为。
• 通过箭头键导航。
• 焦点内存;在重新进入焦点组时还原最后一个焦点的元素。

示例：

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

另请参阅：

• 轻松实现键盘导航。
• 请求开发人员反馈：焦点组。

popover="hint" 属性行为更改

具有 属性 popover="hint" 的元素的行为已更改，以改进与 popover="auto" 元素的交互：打开 popover="hint" 元素将不再无意中关闭不相关的 popover="auto" 元素。

以前，这两种类型的 popover 元素之间的交互在某些情况下可能比较复杂，例如在元素内popover="hint"嵌套popover="auto"元素。

popover="hint" 元素现在仅在隐藏其祖先 popover="auto" 元素或打开新的、不相关的 popover="auto" 元素时才隐藏。

此外，现在可以安全地将元素嵌套 popover="auto" 在元素内 popover="hint" 。 嵌套 popover="auto" 元素将充当 popover="hint" 元素。 这允许在元素中popover="hint"放置可<select>自定义元素等用例。

另请参阅：

• MDN 中的 Popover API。
• MDN 处的 HTML 全局属性。popover

更新可自定义项中的所有 <selectedcontent> 元素 <select>

在可<select>自定义的元素中定义多个<selectedcontent>元素时，所有元素现在都与当前所选选项保持同步，而不是仅按 DOM 顺序显示第一个选项。

另请参阅：

• MDN 中的可自定义选择元素。
• <selectedcontent> HTML selected 选项在 MDN 处显示元素 。

无序流式处理 HTML

<template for>使用 HTML 元素和 <?start> 和 <?end> 处理指令范围更新文档的现有部分，而无需使用 JavaScript。

此功能是为 Web 上相同文档更新添加内置支持的更大计划的一部分。

另请参阅：

• MDN 中的模板> HTML 内容模板元素。<
• 交错的 HTML 流式处理 (修补) - 介绍此功能所属的更广泛计划。

Web API

Microsoft Edge 中包含以下新的 Web API 功能。

FontFaceSet全局公开接口

以前， FontFaceSet 接口未公开为全局属性。 Chromium 的接口定义语言 (IDL) ，因为FontFaceSet以前错误地应用于 LegacyNoInterfaceObjectFontFaceSet，将其隐藏为全局属性。

此更改Chromium与 CSS 字体加载规范以及 Safari 和 Firefox 保持一致。

另请参阅：

• MDN 处的 FontFaceSet 。

对跨源 iframe 和插件禁用 SVG 筛选器

SVG 筛选器不再应用于以下项：

• 跨源或受限 iframe (，例如沙盒 iframe) 。
• 嵌入插件 (，例如 PDF) 。

这可以防止通过 SVG 筛选器效果处理跨源内容的潜在安全问题。

另请参阅：

• MDN 中的 SVG 筛选器。
• <iframe> MDN 中的 HTML 内联框架元素 。

MediaStreamTrackProcessor 帧计数器

discardedFrames和 totalFrames 属性现在在 接口上MediaStreamTrackProcessor可用。

这些计数器允许通过跟踪媒体处理管道的运行状况来监视：

• 收到的帧数。
• 由于系统资源约束而删除的帧数。

另请参阅：

• MDN 中的 MediaStreamTrackProcessor 。

URL 的 data: 不透明源

从 data: URL 创建的专用辅助角色和共享辅助角色现在分配有唯一的不透明源，而不是继承创建者的来源。

这使 Edge 与 HTML Standard保持一致，并通过将这些辅助角色与同源状态（如 、 localStorage和 IndexedDB）BroadcastChannel隔离开来提高安全性。

为了保留隔离边界，这些辅助角色与其创建者保持相同的存储分区 (例如顶级站点或 nonce) 。

另请参阅：

• RFC 2397：“数据”URL 方案。
• HTML Living Standard中辅助角色的脚本设置步骤 3。

PWA 源迁移

Web 应用源迁移允许渐进式 Web 应用 (PWA) 迁移到新的源，同时保留信任、安装状态和适用权限。

这有助于团队跨域安全地移动应用，而无需强制用户重新安装。

另请参阅：

• MDN 中的 Web 应用清单。

当 和 scrollTo 方法完成时scrollBy收到通知

编程滚动方法（如 scrollBy 和 scrollTo）现在返回一个 Promise 对象，该对象可在滚动完成时解析。 使用此承诺在平滑滚动完成后运行代码，而无需依赖计时器或滚动事件轮询。

另请参阅：

• 窗口：scrollBy () MDN 中的方法 。
• Window：scrollTo () MDN 中的方法 。

Web 语音 API：设备上的识别质量

接口 SpeechRecognition 现在支持 quality 属性。

属性 quality 允许指定识别所需的语义功能，该功能使用 processLocally: true（也称为 设备上识别）。

属性支持 quality 的值映射到不断增加的任务复杂性和硬件要求：

• command
• dictation
• conversation

quality使用 属性，可以确定设备是否可以使用设备上的识别来处理用例，或者是否应回退到云识别服务。

另请参阅：

• MDN 中的 SpeechRecognition。
• 使用 SpeechRecognition API 将语音转换为文本。

WebGPU：即时

WebGPU 现在支持即时。

此功能在 WGSL 中添加地址空间，并在setImmediateData()呈现器传递、计算传递和呈现捆绑编码器上添加immediate方法。 可以使用这些 API 将经常更新的小型值传递给着色器，而无需创建 GPU 缓冲区或绑定组。

这对于按绘制的数据（例如对象索引、材料索引和转换值）非常有用。

另请参阅：

• MDN 中的 WebGPU API。
• WebGPU 规范。
• WebGPU 着色语言 (WGSL) 规范。

源试用版

以下是 Microsoft Edge 中提供的新实验 API 的源试验。

通过源试用版，你可以在自己的实时网站上试用实验性 API，时间有限。 若要了解有关源试用的详细信息，请参阅 在 Microsoft Edge 中使用源试用版。

有关可用源试用版的完整列表，请参阅 Microsoft Edge Origin 试用版。