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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-09-30 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] {"lastModified": "Last updated 2024-09-30 UTC."} [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-30 UTC."]]