another year of web platform improvements  |  Blog  |  web.dev

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.

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

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

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

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

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

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

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

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.

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.

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

Event Timing API (for INP)

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.