Interop 2024 mid-year update

Rachel Andrew

As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year.

Where we started

At the beginning of the year, Chrome had an experimental browser support score of 83.

Today that score is 90, with a score for stable browsers of 85 as of the release of Chrome 126 in June. The overall experimental interop score has risen 10 points, and this post shares some of the features that have contributed to that score.

Popover

Popover became part of Baseline Newly Available in April 2024. Popover is exciting because so many of the UI features you need to build—for example, menus, tooltips, overlays for making selections, and teaching UIs—are types of popover. Before popover, creating any of these features involved a lot of custom code. Code to make sure multiple elements were not open at once, or to enable light-dismiss when the user clicked outside of the element. You might also have struggled with z-index, to make sure a UI element stayed on top of the rest of the interface.

All of these features and more are included in the Popover API, saving development time, and helping to create more performant and accessible interfaces. For example, the following code creates a popover with light-dismiss, that will auto-close other popovers when opened.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Find out more in Popover API lands in Baseline. Many applications are already seeing the benefits of Popover. Tokopedia were able to significantly reduce the amount of React code by taking advantage of the feature, using a polyfill for non-supporting browsers.

Advanced custom properties with @property

The @property CSS rule lets you create advanced custom properties, with much more detail than the name and value available in standard custom properties. Set the allowed syntax to define what type of data this property holds—for example color, a number, or length. Then set whether the property inherits, and an initial value.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

The @property rule currently improves the experimental score for Firefox, boosting the stable score when Firefox 128 ships later this month. It also joins Baseline Newly Available.

Learn more in @property: giving superpowers to CSS variables.

The font-size-adjust property

The CSS font-size-adjust property lets you modify the size of lowercase letters relative to the size of uppercase letters. This is useful in situations where font fallback might happen, as it helps to ensure a fallback font is still legible, in particular at small font sizes.

The font-size-adjust property is currently included in the experimental score for Chrome, however it will increase the stable score when it's released with Chrome 127 this month. It also joins Baseline Newly Available.

text-wrap: balance

Using text-wrap: balance instructs the browser to figure out the best balanced line wrapping for text. It's particularly useful for headings, preventing a heading wrapping to a single word on line two, for example.

This has recently become supported by Safari, with other browsers working to fix failing tests to ensure this feature works well across all browsers.

In addition to these major features becoming interoperable, many other improvements have been made. Each test that passes represents an interoperability problem you won't run into. We're excited to see how close we can get to that 100% score by the end of the year.