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.
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.
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.
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.