![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: January 22, 2025

<br />

As Interop 2024 draws to a close, this post looks back at the most successful
year ever for the project. We ended with all experimental browsers reporting a
score of 99, with the stable versions not far behind. This success means that a
number of features are now Baseline Newly available.
![All browsers with a score of 99.](https://web.dev/static/blog/interop-2024-wrapup/image/interop2024wrapup.png) Interop 2024 Dashboard (as of January 22, 2025)

## More features to Baseline

For a feature to be Baseline Newly available, it needs to be interoperable. It's
therefore no surprise that Interop 2024 helped a number of features over that
line and into [Baseline 2024](https://web.dev/baseline/2024.md.txt).

### Registered custom properties

The `@property` rule and `CSS.registerProperty()` static method became Baseline
Newly available in July 2024.

- [`@property` on MDN](https://developer.mozilla.org/docs/Web/CSS/@property)
- [`@property` entry on the Web Platform Dashboard](https://webstatus.dev/features/registered-custom-properties)
- [`@property`: Next-gen CSS variables now with universal browser support](https://web.dev/blog/at-property-baseline.md.txt)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_bf9288640d1d3bbfb2c4ec7366d0357fd2f4e5cab541aca8e31ab7421389adf4.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### The `font-size-adjust` property

The `font-size-adjust` CSS property preserves apparent text size, regardless of
the font used, by scaling fonts to the same size with respect to a specific
metric, such as x-height. This can help make fallback fonts look the same size.
It became Baseline Newly available in July 2024.

- [`font-size-adjust` on MDN](https://developer.mozilla.org/docs/Web/CSS/font-size-adjust)
- [`font-size-adjust` entry on the Web Platform Dashboard](https://webstatus.dev/features/font-size-adjust)
- [CSS `font-size-adjust` is now in Baseline](https://web.dev/blog/font-size-adjust.md.txt)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_e65c6add1f2cced6974df079d47289cbf4b221205576162361dd918f3a6a02e7.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### The `requestVideoFrameCallback()` method for `<video>`

The `requestVideoFrameCallback()` method for `<video>` schedules a function that
runs with the next video frame. It's similar to `requestAnimationFrame()`, but
for video, and became Newly available in October 2024.

- [`requestVideoFrameCallback()` on MDN](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback)
- [`requestVideoFrameCallback()` entry on the Web Platform Dashboard](https://webstatus.dev/features/request-video-frame-callback)
- [Perform efficient per-video-frame operations on video with
  `requestVideoFrameCallback()`](https://web.dev/articles/requestvideoframecallback-rvfc)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_f234794fd42784527efda55f1feeab9a80e3f65500867689141058f2d025ad14.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### Scrollbar styling with `scrollbar-width` and `scrollbar-gutter`

The `scrollbar-width` CSS property sets the width of the scrollbar, and
`scrollbar-gutter` reserves space for the scrollbar, preventing unwanted layout
changes as the scrollbar appears and disappears. They became Baseline Newly
available in December 2024.

- [`scrollbar-width` on MDN](https://developer.mozilla.org/docs/Web/CSS/scrollbar-width)
- [`scrollbar-width` entry on the Web Platform Dashboard](https://webstatus.dev/features/scrollbar-width)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_3f03ae8562e31e75b8e8797931930eec16251788d0cc2f113fed0d56b9d7afe1.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

- [`scrollbar-gutter` on MDN](https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter)
- [`scrollbar-gutter` entry on the Web Platform Dashboard](https://webstatus.dev/features/scrollbar-gutter)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_c0c2e1162f7b19187a4c7c53efdf17d4ea1892e1511b9f28120e2550012f2460.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### The `transition-behavior` property

The `transition-behavior: allow-discrete` CSS declaration allows transitions for
properties whose animation behavior is discrete. Such properties can't be
interpolated and swap from their start value to the end value at 50%. This
property became Baseline Newly available in August 2024.

- [`transition-behavior` on MDN](https://developer.mozilla.org/docs/Web/CSS/transition-behavior)
- [`transition-behavior` entry on the Web Platform Dashboard](https://webstatus.dev/features/transition-behavior)
- [Now in Baseline: animating entry effects](https://web.dev/blog/baseline-entry-animations.md.txt)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_d1ce846b9770557fdeba887bbd55b445a18b6e694ebb58c9fbecc8cffce83a82.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### `text-wrap: balance`

The `text-wrap` CSS property sets how lines break in text that overflows the
container. It is a shorthand for `text-wrap-style` and `text-wrap-mode`. The
`balance` value lets you create balanced headlines and other short pieces of
text. The `text-wrap` property became Baseline Newly available in March 2024.

- [`text-wrap` on MDN](https://developer.mozilla.org/docs/Web/CSS/text-wrap)
- [`text-wrap` entry on the Web Platform Dashboard](https://webstatus.dev/features/text-wrap)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_9bf27badc8773f800ae94e79733a71e9891726a231d14a18960954448ec49455.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### Popover

Popover lets you create overlays declaratively using HTML, or with the
`showPopover()` method. It almost made it to Baseline Newly available, and in
fact we initially thought it had, however an issue with the Safari
implementation meant that it didn't quite hit Newly available in 2024. The good
news is that the issue is fixed in the current Safari Beta 18.3, so we'll soon
be able to properly announce Popover as Baseline Newly available.

- [The Popover API on MDN](https://developer.mozilla.org/docs/Web/API/Popover_API)
- [Popover entry on the Web Platform Dashboard](https://webstatus.dev/features/popover)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_76d3d94ec159048016d62789a639cca432cc7f10dc84f5e68e01d2f0b49280a9.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

## Fixes to Baseline features

There were features included in Interop 2024 that were already classed as
Baseline Newly available, the work was to fix some small differences in
implementation. These might be things that very few people run into, however
small things make a big difference if it's you running into them.

### CSS nesting

CSS nesting allows for shorter selectors, easier reading, and more modularity by
nesting rules inside others. It became Baseline Newly available in December
2023, and was included in Interop 2024 to fix some outstanding interop issues.

- [Nesting on MDN](https://developer.mozilla.org/docs/Web/CSS/CSS_nesting)
- [Nesting entry on the Web Platform Dashboard](https://webstatus.dev/features/nesting)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_270a955afb1fd49c4a178f60ff3720951297f7df0614628d70d6946718ce5d07.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

### Declarative Shadow DOM

The `shadowrootmode` attribute on `<template>` creates a shadow root without the
use of JavaScript. It is a declarative alternative to the \`attachShadow()
method.

- [The `shadowrootmode` attribute on MDN](https://developer.mozilla.org/docs/Web/HTML/Element/template#shadowrootmode)
- [Declarative Shadow DOM entry on the Web Platform Dashboard](https://webstatus.dev/features/declarative-shadow-dom)

<iframe src="https:///frame/blog/interop-2024-wrapup/index_6721f17c619b926b9b3b663f5f0e73d130d433e2e12ccb0778657db66263c570.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

## Interop 2025 is coming soon

The proposals are being finalized right now for Interop 2025, and we're excited
to build on all of our success this year. Look out for the announcement in
February to find out what's included. To follow along with things landing in
Baseline, check out our series of
[Baseline Newly available features](https://web.dev/series/baseline-newly-available)
here on web.dev.