Interop 2025: another year of web platform improvements

Published: February 13, 2025

After the huge success of Interop 2024, the project returns today with a new set of focus areas for 2025. While we couldn't include every suggestion made this year, the final list reaches across the web platform—from CSS to performance-related features.

The focus areas for 2025

  • Anchor positioning
  • backdrop-filter
  • Core Web Vitals
  • <details> element
  • Layout
  • Modules
  • Navigation API
  • Pointer and mouse events
  • Remove mutation events
  • @scope
  • scrollend event
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Web compat
  • WebRTC
  • Writing modes

In addition, and as in previous years, there's a set of areas for investigation. These are areas where we don't have enough information or tests to include as a focus area, but the group feels some work should be done to get them to a stage where we can include them.

  • Accessibility testing
  • Gamepad API testing
  • Mobile testing
  • Privacy testing
  • WebVTT

We're excited about all of these features and the improvements this year's project will bring to the platform. And, as with last year, the project will make a whole set of things Baseline Newly available. This post shares more information about some of the features on the list, with links to information to find out more.

You can follow along on the Interop 2025 dashboard at wpt.fyi/interop-2025 and as things become Baseline Newly available they'll show up in the Baseline 2025 list on webstatus.dev too.

The scores at the start of the project—Interop:33, Investigations:0, Chrome Canary:91, Edge Dev:88, Firefox Nightly:52, Safari Technology Preview:55.
Interop 2025 dashboard (as of February 13, 2025).

CSS and UI

Several of the features included in Interop 2025 are features that you flagged up as important in the State of CSS 2024 survey. They'll help you create more beautiful and performant user experiences.

Anchor positioning

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

This feature lets you anchor a positioned element to an anchor, it's particularly useful when displaying popovers.

An anchor with a positioned element.

Making this feature part of Baseline will make it much easier to create user interfaces, without having to rely on third-party libraries. Learn more in our anchor positioning documentation, and also on MDN—CSS Anchor positioning.

Same-document view transitions

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Also included this year are view transitions, specifically same-document view transitions, and the view-transition-class CSS property.

Learn more about view transitions in Same-document view transitions for single-page applications and in the MDN documentation for view transitions.

The backdrop-filter property

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

The backdrop-filter property has been Baseline Newly available since September 2024. It lets you create effects behind your content. For example to blur or create effects that you might expect to only be available in a graphics application.

Despite being mostly interoperable, you can see from the failing tests for backdrop-filter that there are bugs and issues in those implementations. While these issues might not be a problem to everyone, we know that many of you do run into them, it'll be great to get this feature working really well.

The <details> element

The <details> element is a disclosure widget which can be expanded to reveal additional content. The <details> element itself is Baseline Widely available. However, there are a number of related features that have been more recently added that make <details> more useful.

  • The ::marker and ::details-content CSS pseudo-elements.
  • Using content-visibility to toggle the content instead of display.
  • Auto-expanding the <details> element with find-in-page matches.
  • The hidden="until-found" attribute, which hides an element until it is found using the browser's find-in-page search or it is directly navigated to by following a URL fragment.

The CSS @scope at-rule

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

The @scope at-rule lets you scope your selectors to a sub-tree of the DOM, or even select between an upper and lower boundary in the tree. For example, the following CSS only selects <img> elements inside an element with a class of .card.

@scope (.card) {
  img {
    border-color: green;
  }
}

In the next example, an upper and lower bound is used. The <img> element is only selected if it's between the element with a class of .card and also outside of the element with a class of .card__content.

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

Find more examples of how you can use @scope in Limit the reach of your selectors with the CSS @scope at-rule and in the @scope documentation on MDN.

The scrollend event

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

Without the scrollend event, there's no reliable way to detect that a scroll is complete. The best you could do is to use setTimeout() to check if the scroll has stopped for a period. This makes it more like a scroll has paused event, not a scroll has ended event.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

With the scrollend event, the browser does all this difficult evaluation for you.

document.onscrollend = event => {
  // ...
}

See more examples in Scrollend, a new JavaScript event and also in the MDN documentation for scrollend.

The text-decoration property

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

The text-decoration property is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. It's deemed Baseline Widely available, however in Safari the only unprefixed shorthand property that works is text-decoration-line. It's this that will be addressed during 2025.

Writing modes

The CSS writing-mode property has a number of possible values, many of which are designed to lay out scripts that display vertically. Sometimes however, you want to lay out text vertically as part of a design, rather than for language support reasons. The sideways-lr and sideways-rl values are designed for this, but have suffered from poor browser compatibility. This should be fixed during 2025.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

In addition, the logical CSS properties overflow-inline and overflow-block are included. These make it possible to control what happens when content overflows boxes, regardless of the writing mode.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Core Web Vitals

Web Vitals can help you quantify the experience of your site and identify opportunities to improve. The Web Vitals initiative aims to simplify the landscape, and help sites focus on the metrics that matter most, the Core Web Vitals.

Interop 2025 includes Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) metrics by implementing the LargestContentfulPaint API and the Event Timing API across browsers. The Cumulative Layout Shift (CLS) metric is not in scope.

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (for INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

The WebAssembly API lets you load WebAssembly code, a portable binary instruction format. It can allow you to do things like run an entire blog application, including all server requirements, in the browser!

This year, the work will focus on the following features:

  • JavaScript string builtins: to make the WebAssembly built-in string functions mirror a subset of the JavaScript String API so it can be callable without JavaScript glue code.
  • Resizable buffers integration: to integrate WebAssembly into JavaScript code that uses resizable buffers.

Feature removals

This year the project includes a removal from the platform. Mutation events are deprecated and replaced with the much more performant and Baseline Widely available Mutation Observer API. Chrome removed these events in Chrome 126, and this focus area is to remove them from all browsers.

To understand the history, and why these events are being removed, read Mutation events will be removed from Chrome.

Learn more

Descriptions of the full list of features can be found in the project README. Also, read the posts from the other companies working on Interop 2025.