New to the web platform in September  |  Blog  |  web.dev

New to the web platform in September  |  Blog  |  web.dev


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

Firefox 130 supports the name attribute of the

element. This groups

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.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *