以下是 2026 年 7 月 2 日发布的 Microsoft Edge 150 中的新 Web 平台功能和更新。
若要及时了解最新动态并获取最新的 Web 平台功能,请下载 Microsoft Edge (Beta、Dev 或 Canary) 的预览频道;转到 “成为 Microsoft Edge 预览体验成员)。
详细内容:
Microsoft Edge 开发工具
请参阅 DevTools 中的新增功能 (Microsoft Edge 150) 。
WebView2
请参阅 WebView2 SDK 发行说明中的运行时 150 (2026 年 7 月 7 日的版本 SDK 1.0.4078.44) 。
CSS 功能
Microsoft Edge 中包含以下新的级联样式表 (CSS) 功能。
AccentColor 和 AccentColorText 系统颜色
AccentColor
AccentColorText和系统颜色现在可以用作 CSS 颜色值,以访问用户设备上指定的系统强调色。
另请参阅:
允许对其执行可选舍入参数 polygon()
允许在 CSS 形状函数中使用polygon()可选round参数。 可以指定长度值以圆角面,而无需手动计算贝塞尔曲线。
例如,要创建圆角三角形: polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)
另请参阅:
- 圆形操场 () CSS 多边形 - 交互式演示。
- [css-shapes] 允许对多边形使用可选舍入参数 () #9843 - CSS 工作组问题。
动画缩放
CSS zoom 属性可以进行动画处理,并内插为 <number>. 您可以对缩放进行过渡和动画处理,以平滑缩放元素及其布局,从而补充现有的基于变换的缩放。
另请参阅:
CSS URL 请求修饰符
以下 CSS 函数可与 CSS url() 函数结合使用,以控制引用资源的提取行为:
cross-origin()integrity()referrer-policy()
例如, background-image: url("image.png" cross-origin(anonymous)) 使用 CORS 匿名模式提取图像。
这使您可以对 CSS 加载资源的跨源访问、子资源完整性和引用者策略进行细粒度控制,包括:
- 图像。
- 字体。
- SVG 引用。
- 导入的样式表。
另请参阅:
- < > url CSS 类型。
- 请求 CSS 值和单位中的 URL 修饰符 模块级别 5。
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.
另请参阅:
CSS image(<color>) 函数
CSS image() 函数使您能够轻松地从任何颜色生成纯色图像。
例如,要创建纯红色背景图像,请使用 background: image(red);。
另请参阅:
- <图像> CSS 类型 。
-
图像回退和注释:
image()CSS 图像模块级别 4 中的表示法。
包含图像值的 CSS light-dark()
CSS light-dark() 函数现在接受图像值 (url(), image-set(), none) 。
这使得可以根据用户的首选配色方案在图像之间自动切换。
您可以将该 light-dark() 函数与以下属性中的图像值一起使用:
background-imagelist-style-imageborder-image-sourcecursorcontent
另请参阅:
以逗号分隔的容器查询
该 @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 中的属性。
named-feature() 函数 for CSS @supports
此 named-feature() 函数允许 CSS @supports 规则查询一小组特定的命名功能,这些功能无法使用其他 @supports 机制进行测试,但对其进行测试很有价值。
另请参阅:
-
CSS 条件规则模块级别 5 中规则的
@supports扩展。
overscroll-behavior: chain
overscroll-behavior CSS 属性现在支持该chain值。
此属性影响两个独立的效果:
- 滚动传播。
- 局部边框效果 (如过度滚动拉伸) 。
以前, overscroll-behavior 具有三个值:
-
none:无传播,无局部影响。 -
auto:传播、局部影响。 -
contain:无传播,局部影响。
此功能将添加一个新值来完成集合:
-
chain:传播,无局部影响。
另请参阅:
-
overscroll-behaviorMDN 的 CSS 属性 。 - CSS 中的过度滚动行为属性过度滚动行为模块级别 1。
flex-wrap:balance
flex-wrap:balance 允许您在每个 之间 flex-line分配内容,使布局看起来更加平衡。
这类似于 text-wrap:balance。
另请参阅:
-
flex-wrapMDN 的 CSS 属性 。 -
弹性换行:
flex-wrapCSS 弹性框布局模块级别 2 中的属性。
HTML 功能
Microsoft Edge 中包含以下新 HTML 功能。
focusgroup 属性
HTML focusgroup 属性标准化了复合小部件(例如工具栏、选项卡、菜单和单选组)的键盘导航。
该 focusgroup 属性会自动处理以下操作,无需自定义 JavaScript 代码:
- 流动 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="hint"嵌popover="auto"套元素。
popover="hint" 现在,仅当元素的祖先 popover="auto" 元素被隐藏或打开一个新的、不相关的 popover="auto" 元素时,才会隐藏元素。
此外,现在可以安全地在元素内popover="hint"嵌套popover="auto"元素。 嵌套元素 popover="auto" 将充当元素 popover="hint" 。 这允许使用用例,例如在元素中popover="hint"放置可<select>自定义的元素。
另请参阅:
- MDN 上的弹出框 API。
- MDN 上的 HTML 全局属性。
popover
更新 <selectedcontent> 可自定义项中的所有元素 <select>
在可<select>自定义元素中定义多个<selectedcontent>元素时,所有元素现在都使用当前所选选项保持最新,而不是仅按 DOM 顺序排列的第一个元素。
另请参阅:
流式处理无序 HTML
使用 <template for> HTML 元素和 处理<?end>指令范围更新<?start>文档的现有部分,而无需使用 JavaScript。
此功能是为在 Web 上添加对同一文档更新的内置支持的更大计划的一部分。
另请参阅:
- <模板> HTML 内容 模板元素 。
- 交错 HTML 流式处理 (修补) - 解释此功能所参与的更广泛计划。
Web API
Microsoft Edge 中包含以下新 Web API 功能。
在跨源 iframe 和插件上禁用 SVG 筛选器
SVG 筛选器不再应用于以下内容:
- 跨源或受限 iframe (,例如沙盒 iframe) 。
- 嵌入式插件 (如 PDF) 。
这可以防止通过 SVG 筛选效果处理跨源内容带来的潜在安全问题。
另请参阅:
- MDN 中的 SVG 筛选器。
- MDN 上的 HTML 内联框架元素。
<iframe>
MediaStreamTrackProcessor 帧计数器
discardedFrames和totalFrames属性现在在接口上MediaStreamTrackProcessor可用。
这些计数器允许你通过跟踪以下内容来监视媒体处理管道的运行状况:
- 接收的帧数。
- 由于系统资源约束而丢弃的帧数。
另请参阅:
- MDN 的 MediaStreamTrackProcessor。
URL 的 data: 不透明来源
现在,为 URL 创建 data: 的专用 Worker 和 Shared Worker 分配唯一的不透明源,而不是继承创建者的源。
这使 Edge 与 HTML Standard 保持一致,并通过将这些辅助角色与同源状态(例如 BroadcastChannel、 localStorage和 IndexedDB)隔离来提高安全性。
为了保持隔离边界,这些工作线程与创建者 (保留在同一存储分区中,例如,按顶级站点或 nonce) 。
另请参阅:
- RFC 2397:“数据”URL 方案。
- HTML Living Standard 中工作线程脚本设置的第 3 步。
PWA 源迁移
Web 应用源迁移使渐进式 Web 应用 (PWA) 能够迁移到新源,同时保留信任、安装状态和适用权限。
这可以帮助团队安全地跨域移动应用,而无需强制用户重新安装。
另请参阅:
- MDN 上的 Web 应用清单。
当 和 scrollTo 方法完成时获得scrollBy通知
编程滚动方法(如 scrollByscrollToand )现在返回一个 Promise 在滚动完成时解析的对象。 使用此承诺在平滑滚动完成后运行代码,而不依赖计时器或滚动事件轮询。
另请参阅:
- Window: rollBy () MDN 方法。
- Window: rollTo () MDN 方法。
Web 语音 API:设备上识别质量
SpeechRecognition接口现在支持该quality属性。
通过 quality 该属性,可以指定识别所需的语义功能,该功能使用 processLocally: true,也称为设备上 识别。
属性支持的 quality 值会映射到不断增加的任务复杂性和硬件要求:
commanddictationconversation
使用该 quality 属性,可以确定设备是否可以使用设备上识别来处理用例,或者是否应该回退到云识别服务。
另请参阅:
WebGPU: 即时
WebGPU 现在支持即时。
此功能在 WGSL 中添加一个 immediate 地址空间,并在 setImmediateData() 渲染通道、计算通道和呈现捆绑包编码器上添加一个方法。 可以使用这些 API 将经常更新的小值传递给着色器,而无需创建 GPU 缓冲区或绑定组。
这对于每个绘制的数据非常有用,例如对象索引、材质索引和变换值。
另请参阅:
- MDN 的 WebGPU API。
- WebGPU 规范。
- WGSL) 规范 (WebGPU 着色语言 。
源试验
以下是 Microsoft Edge 中可用的新试验性 API 的源试用版。
源试用版允许你在有限的时间内在自己的实时网站上试用实验性 API。 若要了解有关源试用版的详细信息,请参阅 在 Microsoft Edge 中使用源试用版。
有关可用源试用版的完整列表,请参阅 Microsoft Edge 源试用版。
| 名称 | 说明 | 注册 |
|---|---|---|
| 提示 API | 从网站或扩展 JavaScript 代码提示内置语言模型。 另请参阅 提示 API。 | 注册 |
| WebAssembly 自定义描述符 | 在自定义描述符对象中更有效地存储与源级类型关联的数据。 | 注册 |
| 软导航启发式 | 公开用于在单页应用中收集性能指标的软导航启发式方法。 | 注册 |
| WebNN | 直接在 Web 应用中构建和执行硬件加速机器学习模型。 | 注册 |
| CSP script-src 中的 URL 和评估哈希 | 为 CSP 指令引入 url 和 eval- 哈希 script-src ,取代基于主机名的允许列表和 unsafe-eval. |
注册 |
| Web 安装 API | 允许网站使用 navigator.install()将另一个网站安装为 Web 应用。 |
注册 |
OpaqueRange |
支持在内部 <input> 文本和 <textarea> 元素上创建实时范围,这些元素会随着用户编辑而自动更新。 这些范围支持几何方法getBoundingClientRect(),例如 CSS 自定义突出显示 API,该 API 支持插入点定位弹出窗口和内联拼写检查等用例,直接在表单控件上突出显示,而无需克隆元素或公开内部 DOM 结构。 |
注册 |
| 画布中的 HTML | 允许使用新的绘图方法和 paint 事件在画布中呈现 HTML。 |
注册 |
| 数字凭据 API - 发证支持 | 触发从凭据颁发者服务器到数字钱包应用程序的用户凭据颁发。 | 注册 |
prerender_until_script 推理规则 API 操作 |
预测规则 API 操作,用于预呈现页面,但在脚本执行时切换到预取。 | 注册 |
| WebAudio 可配置呈现量子 | 允许在创建 AudioContext OR OfflineAudioContext时指定自定义呈现量子大小。 |
注册 |
| 通过表单提交进行预呈现激活 | 允许通过表单提交激活推理规则 API 中的预呈现规则。 | 注册 |
| CPU 性能 API | 公开有关用户设备功能的信息,以便与计算压力 API 配合使用。 | 注册 |
| 连接允许列表 | 限制从文档或工作线程到服务器分布的终结点允许列表的连接。 | 注册 |
focus-without-user-activation 权限策略 |
通过权限策略为嵌入者提供对嵌入式内容 focus-without-user-activation 中的编程焦点的控制。 当策略针对帧被拒绝时,除非由用户激活触发或专注正在委派,否则将阻止编程的焦点调用 (element.focus()、 autofocus、 window.focus()和 dialog.showModal()弹出框焦点) 。 |
注册 |
| 增强的画布 TextMetrics | 使用选择矩形、边界框查询和字形簇操作扩展 TextMetrics 画布 API。 | 注册 |
<usermedia> HTML 元素 |
浏览器控制的 HTML 元素,用于请求摄像头或麦克风访问权限,取代基于 JavaScript 的权限请求。 | 注册 |
| 预呈现跨源 iframe | 通过选择加入的响应标头预呈现跨源 iframe,而不是将其延迟到页面激活。 | 注册 |
| 容器计时 | 监视何时显示带批注的 DOM 容器并完成其初始绘制。 | 注册 |
| 在长动画帧 API 中单独样式和布局持续时间 | 添加 styleDuration、 forcedStyleDuration、 layoutDuration和 forcedLayoutDuration 属性以进行更深入的 CSS 性能分析。 |
注册 |
| 提示 API 采样参数 | 和temperature采样参数允许您topK优化每个语言模型会话的模型行为。 |
注册 |
<install> HTML 元素 |
使用该 <install> 元素以声明方式将其他网站安装为 Web 应用。 |
注册 |
| 声明性 CSS 模块脚本 | 使用内联样式模块与影子根(包括声明性影子根)共享声明性样式表。 | 注册 |
| 游戏板原始输入事件 | 网页可以侦听gamepadrawinputchanged事件,而不是依赖于频繁navigator.getGamepads()的轮询。 只要在同一设备的输入帧之间检测到变化,就会引发这些事件。 |
注册 |
| 自动填充事件 | 检测浏览器自动填充何时更新表单控件,以适应自定义 UI 和验证。 | 注册 |
| WebAssembly 自定义描述符 V2 | 在自定义描述符对象中更有效地存储与源级类型关联的数据。 | 注册 |
| WebMCP | 允许网站为浏览器内代理注册工具,以代表用户完成任务。 | 注册 |
注意
本页面的某些部分是根据 Chromium.org 创建和共享的工作进行的修改,并根据知识共享署名 4.0 国际许可证中所述的条款使用。