New to the web platform in September

Discover some of the interesting features that have landed in stable and beta web browsers during September 2024.

Rachel Andrew

Stable browser releases

In September 2024, Firefox 130, Safari 18, and Chrome 129 became stable. This post looks at the new features added to the web platform.

Exclusive accordions with the name attribute for <details>

Firefox 130 supports the name attribute of the <details> element. This groups <details> elements, where only one element within a group can be open at a time. This lets you create an exclusive accordion without using JavaScript.

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

Animate to auto (and more)

Chrome 129 adds the CSS interpolate-size property and calc-size() function.

The CSS interpolate-size property lets a page opt into animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, and fit-content, in the cases where those keywords can be animated.

Browser Support

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

The CSS calc-size() function is a CSS function similar to calc(), however it also supports operations on exactly one supported sizing keyword. Supported sizing keywords are auto, min-content, max-content, and fit-content.

Browser Support

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

Learn more in Animate to height: auto; (and other intrinsic sizing keywords) in CSS.

Format durations in JavaScript

Also in Chrome 129 is Intl.DurationFormat, providing a method of formatting durations, for example "1 hr 40 min 30 sec", that supports multiple locales.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: 16.4.

Source

WebCodecs API

The Web Codecs API is now supported on desktop in Firefox 130, giving web developers low-level access to the individual frames of a video stream and chunks of audio. The new interfaces include: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame, and VideoColorSpace. This API doesn't quite make Baseline Newly available as it's not yet supported in Firefox Android, however there is Firefox Nightly support for Android.

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

CSS style queries for custom properties

Safari 18 brings support for several new features including CSS Style Queries. Style queries provide a way to create reusable styles, and apply them as a group. For example when you have a reusable component with multiple variations.

Browser Support

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

Source

Learn more about CSS style queries.

Same document view transitions

Safari 18 also supports same document view transitions for SPAs, letting you create visual transitions between different states of an app.

Browser Support

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

Source

Learn more about same document view transitions

Beta browser releases

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. New betas are Firefox 131, Chrome 130, and Safari 18.1. These releases bring many great features to the platform. Check out the release notes for all of the details. Here are just a few highlights.

Firefox 131 includes new JavaScript iterator helpers and Cookies Having Independent Partitioned State (CHIPS) is now enabled.

Chrome 130 includes support for box-decoration-break: clone both for inline fragmentation (line layout) and block fragmentation (fragments created for printing and multicol). There's also better error reporting in IndexedDB, and a new connected attribute for the Web Serial SerialPort interface.

Safari 18.1 is a release of bugfixes to existing features.