Edit

Microsoft Edge 133 web platform release notes (Feb. 2025)

The following are the new web platform features and updates in Microsoft Edge 133, which releases on Feb. 6, 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:

Microsoft Edge DevTools

See What's new in DevTools (Microsoft Edge 133).

WebView2

See:

Web platform features

Enabled features

Animation.overallProgress

Adds an overallProgress property to the Animation JavaScript class.

This property provides a convenient and consistent representation of how far along an animation has advanced across its iterations and regardless of the nature of its timeline.

Atomics.pause

Adds the Atomics.pause method, to hint to the CPU that the current code is executing a spinlock.

CSP hash reporting for scripts

Complex web applications often need to keep a record of the subresources that they download, for security purposes. In particular, upcoming industry standards and best practices (such as PCI-DSS v4) require that web applications keep an inventory of all the scripts they download and execute.

This feature builds on Content Security Policy (CSP) and the Reporting API to report the URLs and hashes of all the script resources that the document loads.

CSS :open pseudo-class

The :open pseudo-class matches

and
when they are in their open state, and matches when they are in modes which have a picker and the picker is showing.

CSS scroll state container queries

Use container queries to style descendants of containers based on their scroll state.

The query container is either a scroll container, or an element affected by the scroll position of a scroll container. The following states can be queried:

  • stuck: A sticky positioned container is stuck to one of the edges of the scroll box.

  • snapped: A scroll snap aligned container is currently snapped horizontally or vertically.

  • scrollable: Whether a scroll container can be scrolled in a queried direction.

A new container-type: scroll-state lets containers to be queried.

For example:

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child { font-size: 75% }
}
CSS advanced attr() function

Implement the augmentation to attr() that's specified in CSS Level 5, which allows types besides , and allows usage in all CSS properties (besides pseudo-element content).

Example:



test
CSS text-box, text-box-trim, and text-box-edge properties

To achieve optical balance of text content, the text-box-trim and text-box-edge properties, along with the text-box shorthand property, make finer control of vertical alignment of text possible.

The text-box-trim property specifies the sides to trim (above or below). The text-box-edge property specifies how the edge should be trimmed.

These properties allow you to control vertical spacing precisely, by using the font metrics.

ideographic and ideographic-ink, two values for the text-box-edge property for Chinese, Japanese, and Korean (CJK) characters are deferred to a future release.

DOM state-preserving Move

This feature adds a DOM primitive (moveBefore) that allows moving an element around in a DOM tree, without resetting the element's state. This function is available on ParentNode nodes, such as Element, Document, and DocumentFragment.

When moving an element instead of removing or inserting an element, state such as the following is preserved: