Discover some of the interesting features that have landed in stable and beta web browsers during September 2024.
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
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
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
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.
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.
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.
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.
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.