以下是 2025 年 9 月 4 日发布的 Microsoft Edge 140 中的新 Web 平台功能和更新。
若要保持最新状态并获取最新的 Web 平台功能,请下载Microsoft Edge (Beta、Dev 或 Canary) 的预览频道;转到 成为Microsoft Edge 预览体验成员。
详细内容:
Edge DevTools
请参阅 DevTools (Microsoft Edge 140) 中的新增功能 。
WebView2
请参阅 2025 年 9 月 (1.0.3485.44) WebView2 SDK 的发行说明。
Web 平台功能
CSS 功能
CSS caret-animation 属性
Microsoft Edge 支持对 CSS 属性进行 caret-color 动画处理。 但是,在进行动画处理时,插入符号的默认闪烁行为会干扰动画。
属性 caret-animation 现在支持两个值:
-
auto:发生默认的浏览器闪烁行为。 -
manual:控制插入符号动画。
另请参阅:
- 插入插入符号的动画:CSS 基本用户界面模块级别 4 中的插入符号动画。
counter() 和 counters() 在 CSS 属性的 content 可选文本中
counter()和 counters() CSS 函数现在可以在 CSS 属性的content可选文本部分使用。
例如:
::before {
content: url("images/chapter-separator.png") / "Chapter" counter(chapter);
}
另请参阅:
CSS scroll-target-group 属性
scroll-target-group: auto CSS 属性指定元素是滚动标记组容器。
浏览器跟踪滚动标记组容器中的当前滚动标记,并允许使用伪类设置元素的:target-current样式<a>。
例如,以下代码片段演示如何自动突出显示目录中当前可见的章节:
<style>
ol {
right: 10px;
top: 10px;
position: fixed;
scroll-target-group: auto;
}
a:target-current {
color: red;
}
.chapter {
height: 60vh;
margin: 10px;
}
</style>
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#ch1">Chapter 1</a></li>
<li><a href="#ch2">Chapter 2</a></li>
</ol>
<div id="intro" class="chapter">Introduction content</div>
<div id="ch1" class="chapter">Chapter 1 content</div>
<div id="ch2" class="chapter">Chapter 2 content</div>
另请参阅:
- MDN 处的 ::scroll-marker 。
- :MDN 中的 target-current。
- CSS Overflow 模块级别 5 草稿中的“滚动目标组”属性。
CSS 类型算术
CSS 中的类型化算术允许编写表达式(如 calc(10em / 1px) 或 calc(20% / 0.5em * 1px) )来获取无单位值。 无单位值可用于排版等情况。
CSS 类型算术允许将单位值转换为无单位值。 然后,可以在接受数字的 CSS 属性中使用无单位值,或者进一步将无单位值乘以另一个单位的值,例如将像素值转换为度值。
另请参阅:
- 在 CSS 值和单元模块级别 4 中键入“检查”。
查看过渡 finished 承诺计时更改
以前,视图转换的承诺 finished 在浏览器生成删除视图过渡的视觉框架后解析。 如果 JavaScript 代码修改样式,这可能会导致视图转换结束时闪烁。
现在,为了解决这个问题, finished 承诺的时间已经改变。
另请参阅:
视图切换:继承更多动画属性
以下 CSS 动画属性现在由视图转换伪元素继承:
animation-timing-functionanimation-iteration-countanimation-directionanimation-play-stateanimation-delay
另请参阅:
- 在 MDN 中查看转换 API。
嵌套视图转换
嵌套视图转换允许视图转换生成嵌套伪元素树而不是平面伪元素树,这允许某些视图转换与其原始元素更类似。
某些 CSS 功能依赖于 DOM 树中元素之间的关系,例如:
- 从
overflow、clip-path或border-radius属性进行剪裁。 - 、 或
perspective属性中的transformtransform-style3D 效果。 - 、 或
filter属性的opacitymask-image掩码和效果。
这些效果的可视输出取决于 DOM 树结构,平展 DOM 树的视图转换可能会导致这些效果无法按预期工作。
另请参阅:
font-variation-settings 规则中的 @font-face 描述符
@font-face 规则现在支持 font-variation-settings 属性。
属性 font-variation-settings 允许你调整字体的粗细、宽度、倾斜和单个元素上的其他轴。 现在, font-variation-settings 还可以在规则声明中使用 @font-face 属性,这有助于减少重复,并更易于定义版式样式。
另请参阅:
- MDN 处的 font-variation-settings。
- MDN 的@font脸 。
Web API
__Http- 和 __HostHttp- Cookie 名称前缀
为了在服务器端区分服务器和客户端设置的 Cookie, __Http- 现在 Cookie 中提供了 和 __HostHttp- 名称前缀。
这些前缀可用于检查是否使用 JavaScript 代码在客户端设置了 Cookie,例如验证客户端是否未意外地设置通常由服务器设置的 Cookie。
另请参阅:
- Cookie 中的“__Http-”前缀:HTTP 状态管理机制。
overscroll-behavior 从 <html> 传播到视区
以前, overscroll-behavior 已从 <body> 传播到页面的视区。 属性 overscroll-behavior 现在从根 <html> 元素传播到视区。
这Microsoft Edge 与其他浏览器保持一致。
另请参阅:
- MDN 中的 overscroll-behavior。
min 选项 ReadableStreamBYOBReader.read(view)
通过 min API 选项 ReadableStreamBYOBReader.read(view) ,可以要求流在解析读取作之前等待至少最少数量的可用元素。
通过 ReadableStreamBYOBReader.read(view) API,可以提供读取流数据的缓冲区视图。 新 min 选项可用于避免使用比视图所能容纳的元素少的元素解析流的读取作,这对于性能敏感型应用程序非常有用,在这些应用程序中,使用者在继续解码、分析或其他处理逻辑之前通常需要最少数量的元素。
另请参阅:
container 选项 scrollIntoView()
默认情况下,函数 scrollIntoView() 滚动元素的每个上级,该元素也是滚动容器。
函数 scrollIntoView() 现在支持选项 container ,该选项只能用于滚动最近的上级。
例如:
slideList.addEventListener('click', event => {
// scrollIntoView will automatically determine the position.
event.target.targetSlide.scrollIntoView({container: 'nearest', behavior: 'smooth'});
});
另请参阅:
- 元素:scrollIntoView () 方法 位于 MDN。
服务辅助角色静态路由 API 计时
新的服务辅助角色静态路由 API 计时信息现在可用于导航和资源计时 API。 利用此信息,可以测量静态路由 API 产生的延迟,例如进行缓存查找所需的路由器评估时间或时间,或者确定匹配的源是否为使用的最终源。
新的计时信息提供:
- 匹配的路由 (静态路由 API 评估) 路由。
- 从中检索资源的实际源。
- 匹配路线所花费的时间。
另请参阅:
- MDN 中的导航和资源计时。
- MDN 中的服务辅助角色 API。
SharedWorker 脚本继承 Blob URL 的控制器
SharedWorker 实例现在继承 Blob URL 的控制器。 这使得 Microsoft Edge 与其他浏览器保持一致。
另请参阅:
- MDN 的 SharedWorker。
- MDN 中的 Blob。
Popover ToggleEvent source 属性
source弹出框实例的 ToggleEvent 属性现在引用触发 的元素(ToggleEvent如果适用)。
例如,如果用户 <button> 单击具有 popovertarget 属性的元素或 commandfor 设置为打开弹出框的属性,则 ToggleEvent 具有 source 设置为调用按钮的属性。
另请参阅:
在 base64 和十六进制格式之间转换 Uint8Array
Uint8Array 对象具有以下新方法,用于在 Base64 和十六进制数据格式之间转换:
Uint8Array.fromBase64()Uint8Array.fromHex()Uint8Array.prototype.toBase64()Uint8Array.prototype.toHex()Uint8Array.prototype.setFromBase64()Uint8Array.prototype.setFromHex()
另请参阅:
- Uint8Array 到/从 base64
- Uint8Array at MDN。
highlightsFromPoint API
通过 highlightsFromPoint API,可以通过检测文档中特定点存在的突出显示点来与自定义突出显示进行交互。
对于 highlightsFromPoint 多个突出显示可能重叠或存在于阴影 DOM 中的应用,API 非常有用。 借助此 API,可以更有效地管理具有自定义突出显示的动态交互,例如通过响应突出显示区域上的用户单击或悬停事件来触发自定义工具提示、上下文菜单或其他交互式功能。
另请参阅:
- MDN 中的 CSS 自定义突出显示 API。
已删除的功能
删除了某些元素内的特殊字号规则<h1>
以前,特殊边距和字号应用于<h1>嵌套在 、<aside>、 <nav>和 <section> 元素中的<article>元素。
现在删除了这些特殊规则,因为它们会导致辅助功能问题,例如在视觉上减小嵌套 <h1> 元素的字号,使其看起来类似 <h2> ,而不会在辅助功能树中反映此更改。
另请参阅:
源试用版
以下是新的实验性 API,你可以在自己的实时网站上试用有限时间。
若要了解有关源试用的详细信息,请参阅 在 Microsoft Edge 中使用源试用版。
若要查看可用源试用版的完整列表,请参阅 Microsoft Edge Origin 试用版。
Microsoft仅限边缘的源试用版
Web 应用范围扩展
到期日期:2025 年 8 月 31 日
scope_extensions 是一个新的 Web 应用清单成员,使 Web 应用能够将其范围扩展到其他源。
范围扩展允许依赖多个子域和顶级域的 Web 应用显示为单个 Web 应用。
{
"name": "Example app",
"display": "standalone",
"start_url": "/index.html",
"scope_extensions": [
{
"type": "type",
"origin": "https://example.com"
}
]
}
成员中列出的 scope_extensions 源必须通过托管名为 .well-known/web-app-origin-association的配置文件来确认它们与 Web 应用相关联。 该文件必须列出 Web 应用的源:
{
"https://sample-app.com/": {
"scope": "/"
}
}
弃用 MS 高对比度
将于 2025 年 9 月 9 日到期。
MS 高对比度弃用源试用版启用旧 CSS -ms-high-contrast 媒体查询和旧属性 -ms-high-contrast-adjust 。
请参阅弃 用 -ms-high-contrast 和 -ms-high-contrast-adjust 支持。
AriaNotify API
将于 2025 年 10 月 14 日到期。
AriaNotify API 使应用能够在网页内容发生非用户发起的更改时直接告诉屏幕阅读器该说什么。 在最简单的方案中,对文档或元素调用 ariaNotify("foo") 。
请参阅 使用 Aria Notify 创建更易于访问的 Web。
购置信息 API
将于 2025 年 12 月 18 日到期。
购置信息 API 支持通过应用商店或直接从浏览器获取的 PWA 的第三方获取属性。
注意
本页的部分内容是基于 Chromium.org 创建和共享的作品的修改,并根据 Creative Commons 署名 4.0 国际许可中所述的术语使用。