Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
The following are the new web platform features and updates in Microsoft Edge 140, which releases on September 4, 2025.
To stay up-to-date and get the latest web platform features, download a preview channel of Microsoft Edge (Beta, Dev, or Canary); go to Become a Microsoft Edge Insider.
Detailed contents:
- Edge DevTools
- WebView2
- Web platform features
- CSS features
- CSS
caret-animation
property counter()
andcounters()
in alternative text of thecontent
CSS property- CSS
scroll-target-group
property - CSS typed arithmetic
- View transition
finished
promise timing change - View transitions: more animation properties are inherited
- Nested view transitions
font-variation-settings
descriptor in@font-face
rules
- CSS
- SVG features
- Web APIs
ariaNotify()
API__Http-
and__HostHttp-
cookie name prefixesoverscroll-behavior
propagation from<html>
to the viewportmin
option forReadableStreamBYOBReader.read(view)
container
option forscrollIntoView()
- Service worker static routing API timings
- SharedWorker script inherit controllers for Blob URLs
restrictOwnAudio
media track constraint- Popover ToggleEvent source attribute
- Convert Uint8Array between base64 and hex formats
highlightsFromPoint
API
- Removed features
- CSS features
- Origin trials
Edge DevTools
See What's New in Microsoft Edge DevTools.
WebView2
See Release Notes for the WebView2 SDK.
Web platform features
CSS features
CSS caret-animation
property
Microsoft Edge supports animating the caret-color
CSS property. However, when animated, the default blinking behavior of the caret interfered with the animation.
The caret-animation
property now supports two values:
auto
: The default browser blinking behavior occurs.manual
: You control the caret animation.
See also:
- Animation of the insertion caret: caret-animation in CSS Basic User Interface Module Level 4.
counter()
and counters()
in alternative text of the content
CSS property
The counter()
and counters()
CSS functions can now be used in the alternative text portion of the content
CSS property.
For example:
::before {
content: url("images/chapter-separator.png") / "Chapter" counter(chapter);
}
See also:
CSS scroll-target-group
property
The scroll-target-group: auto
CSS property specifies that the element is a scroll marker group container.
The browser tracks the current scroll marker within scroll marker group containers and allows you to style <a>
elements by using the :target-current
pseudo class.
For example, the following snippet shows how to automatically highlight the currently visible chapter within a table of contents:
<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>
See also:
- ::scroll-marker at MDN.
- :target-current at MDN.
- The 'scroll target group' property in CSS Overflow Module Level 5 draft.
CSS typed arithmetic
Typed arithmetic in CSS allows you to write expressions such as calc(10em / 1px)
or calc(20% / 0.5em * 1px)
to get unitless values. Unitless values can be useful for cases such as typography.
CSS typed arithmetic allows you to convert values with units into unitless values. You can then use the unitless value in CSS properties that accept numbers, or further multiply the unitless value by a value with another unit, such as to convert a pixels value to a degrees value.
See also:
- Type Checking in CSS Values and Units Module Level 4.
View transition finished
promise timing change
Previously, a view transition's finished
promise resolved after the visual frame that removes the view transition has been produced by the browser. This can cause flickering at the end of the view transition, if JavaScript code modifies styles.
The timing of the finished
promise has now been changed to address this issue.
See also:
View transitions: more animation properties are inherited
The following CSS animation properties are now inherited by view transition pseudo-elements:
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
See also:
- View Transition API at MDN.
Nested view transitions
Nested view transitions allow view transitions to generate a nested pseudo-element tree rather than a flat pseudo-element tree, which allows certain view transitions to appear more like their original elements.
Some CSS features rely on the relationship between elements in the DOM tree, such as:
- Clipping from the
overflow
,clip-path
, orborder-radius
properties. - 3D effects from the
transform
,transform-style
, orperspective
properties. - Masking and effects from the
opacity
,mask-image
, orfilter
properties.
The visual output of these effects depend on the DOM tree structure, and a view transition that flattens the DOM tree can cause these effects to not work as expected.
See also:
- View Transition API at MDN.
- Explainer: Nested View Transition Groups in the
WICG / view-transitions
GitHub repo.
font-variation-settings
descriptor in @font-face
rules
@font-face
rules now support the font-variation-settings
property.
The font-variation-settings
property allows you to adjust a font's weight, width, slant, and other axes on individual elements. Now, the font-variation-settings
property can also be used within @font-face
rule declarations, which can help reduce repetition and make it easier to define typographic styles.
See also:
- font-variation-settings at MDN.
- @font-face at MDN.
SVG features
CSS width and height support for SVG <use>
element
The SVG <use>
element now supports the width
and height
CSS properties.
This allows you to control the sizing of SVG elements through CSS, such as to improve their responsiveness.
With this feature, the following two HTML snippets now produce the same output:
<svg width="100px" height="100px">
<defs>
<symbol id="sym" width="80" height="80">
<rect width="100" height="100" fill="green" />
</symbol>
</defs>
<use href="#sym" style="width:40px; height:40px" />
</svg>
<svg width="100px" height="100px">
<defs>
<symbol id="sym" width="80" height="80">
<rect width="100" height="100" fill="green" />
</symbol>
</defs>
<use href="#sym" width="40" height="40" />
</svg>
See also:
<svg>
at MDN.
Support download
attribute in SVG <a>
element
The download
attribute is now supported by SVG <a>
elements.
The download
attribute enables you to specify that the target of an SVG hyperlink should be downloaded rather than navigated to.
See also:
<a>
at MDN.
Web APIs
ariaNotify()
API
The ariaNotify()
API enables your app to directly tell a screen reader what to say when there's a non-user-initiated change in the content of a webpage. In the simplest scenario, you call ariaNotify("foo")
on the document or on an element.
See also:
__Http-
and __HostHttp-
cookie name prefixes
To distinguish, on the server side, between cookies that were set by the server and the client, the __Http-
and __HostHttp-
name prefixes are now available in cookies.
These prefixes can be used to check if a cookie was set on the client-side by using JavaScript code, such as to verify that a cookie that's normally always set by the server was not unexpectedly set by the client.
See also:
- The "__Http-" Prefix in Cookies: HTTP State Management Mechanism.
overscroll-behavior
propagation from <html>
to the viewport
Previously, overscroll-behavior
was propagated from the <body>
to the viewport of the page. The overscroll-behavior
property is now propagated from the root <html>
element to the viewport.
This aligns Microsoft Edge with other browsers.
See also:
- overscroll-behavior at MDN.
min
option for ReadableStreamBYOBReader.read(view)
The min
option for the ReadableStreamBYOBReader.read(view)
API lets you require that the stream wait until at least a minimum number of elements are available before resolving the read operation.
The ReadableStreamBYOBReader.read(view)
API allows you to supply a buffer view into which stream data is read. The new min
option can be used to avoid resolving the stream's read operation with fewer elements than the view can accommodate, which is useful for performance-sensitive applications where consumers often require a minimum number of elements before they can proceed with decoding, parsing, or other processing logic.
See also:
container
option for scrollIntoView()
By default, the scrollIntoView()
function scrolls every ancestor of the element that's also a scroll container.
The scrollIntoView()
function now supports a container
option, which can be used to only scroll the nearest ancestor instead.
For example:
slideList.addEventListener('click', event => {
// scrollIntoView will automatically determine the position.
event.target.targetSlide.scrollIntoView({container: 'nearest', behavior: 'smooth'});
});
See also:
- Element: scrollIntoView() method at MDN.
Service worker static routing API timings
New service worker static routing API timing information is now available to the navigation and resource timing APIs. This information allows you to measure the latency that's incurred by the static routing API, such as router evaluation time or time required to conduct cache lookup, or determine if the matched source is the final source used.
The new timing information provides:
- The matched route (the route that the static routing API evaluated).
- The actual source from which the resource was retrieved.
- The time it took to match the route.
See also:
- Service Worker API at MDN.
- Use the Service Worker Static Routing API to bypass the service worker for specific paths
SharedWorker script inherit controllers for Blob URLs
SharedWorker
instances now inherit controllers for Blob URLs. This makes Microsoft Edge consistent with other browsers.
See also:
- SharedWorker at MDN.
- Blob at MDN.
restrictOwnAudio
media track constraint
The new restrictOwnAudio
media track constraint can help create cleaner screen recordings, such as when the capturing webpage itself is playing audio and you don't want that audio to be included in the capture, to avoid undesirable echo.
By default, when using getDisplayMedia()
and when the system audio is captured, all audio that's played by the system is captured. If the restrictOwnAudio
constraint is set, the captured system audio is filtered to exclude audio originating from the document that called getDisplayMedia()
.
See also:
- MediaDevices: getDisplayMedia() method at MDN.
- MediaTrackConstraints at MDN.
Popover ToggleEvent source
attribute
The source
attribute of a popover's ToggleEvent
instances now refers to the element which triggered the ToggleEvent
, if applicable.
For example, if a <button>
element with the popovertarget
attribute, or the commandfor
attribute set up to open a popover, is clicked by the user, then the ToggleEvent
has a source
attribute set to the invoking button.
See also:
- ToggleEvent at MDN.
Convert Uint8Array between base64 and hex formats
Uint8Array
objects have the following new methods to convert between Base64 and Hex data formats:
Uint8Array.fromBase64()
Uint8Array.fromHex()
Uint8Array.prototype.toBase64()
Uint8Array.prototype.toHex()
Uint8Array.prototype.setFromBase64()
Uint8Array.prototype.setFromHex()
See also:
- Uint8Array to/from base64
- Uint8Array at MDN.
highlightsFromPoint
API
The highlightsFromPoint
API lets you interact with custom highlights by detecting which highlights exist at a specific point within a document.
The highlightsFromPoint
API is useful for apps where multiple highlights may overlap or exist within the shadow DOM. This API makes it possible to manage dynamic interactions that have custom highlights more effectively, such as by responding to user clicks or hover events on highlighted regions, to trigger custom tooltips, context menus, or other interactive features.
See also:
- CSS Custom Highlight API at MDN.
Removed features
Removed special font size rules for <h1>
within some elements
Previously, special margins and font sizes were applied to <h1>
elements that were nested within <article>
, <aside>
, <nav>
, and <section>
elements.
These special rules are now removed, because they caused accessibility issues, such as visually reducing the font size for nested <h1>
elements to look like <h2>
without reflecting this change in the accessibility tree.
See also:
Origin trials
The following are new experimental APIs which you can try on your own live website for a limited time.
To learn more about origin trials, see Use origin trials in Microsoft Edge.
To see the full list of available origin trials, see Microsoft Edge Origin Trials.
Microsoft Edge-only origin trials
Web app scope extensions
Expires on August 31, 2025
scope_extensions
is a new web app manifest member that enables web apps to extend their scope to other origins.
Scope extensions allow web apps that rely on multiple subdomains and top-level domains to be presented as a single web app.
{
"name": "Example app",
"display": "standalone",
"start_url": "/index.html",
"scope_extensions": [
{
"type": "type",
"origin": "https://example.com"
}
]
}
The origins that are listed in the scope_extensions
member must confirm that they are associated with the web app, by hosting a configuration file named .well-known/web-app-origin-association
. The file must list the web app's origin:
{
"https://sample-app.com/": {
"scope": "/"
}
}
MS High Contrast Deprecation
Expires on September 9, 2025.
The MS High Contrast Deprecation origin trial enables the legacy CSS -ms-high-contrast
media query and the legacy -ms-high-contrast-adjust
property.
See Deprecating support for -ms-high-contrast and -ms-high-contrast-adjust.
AriaNotify API
Expires on October 14, 2025.
The AriaNotify API enables your app to directly tell a screen reader what to say when there's a non-user-initiated change in the content of a webpage. In the simplest scenario, you call ariaNotify("foo")
on the document or on an element.
See Creating a more accessible web with Aria Notify.
Acquisition Info API
Expires on December 18, 2025.
The Acquisition Info API supports third-party acquisition attribution for PWAs that were acquired through an app store or directly from the browser.
Note
Portions of this page are modifications based on work created and shared by Chromium.org and used according to terms described in the Creative Commons Attribution 4.0 International License.