Discover some of the interesting features that have landed in stable and beta web browsers during March 2024.
Stable browser releases
In March 2024 Firefox 124, Safari 17.4, and Chrome 123 became stable. This post looks at the new features added to the web platform.
Adapt color schemes with light-dark()
The light-dark()
color function landed in Chrome 123 and
makes it easier to adapt color schemes to user preference.
In the following example color-scheme
is set to light dark
on root
.
The custom properties use the light-dark()
color function to set colors
that will be switched between depending on the user's light or dark mode preference.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
Find more examples and details in
CSS color-scheme
-dependent colors with light-dark()
Better control of inputs with field-sizing
Also in Chrome 123, the field-sizing
property enables automatically-growing text input fields.
Kerning for CJK punctuation with text-spacing-trim
In Chrome 123, the text-spacing-trim
property applies kerning to Chinese, Japanese,
and Korean (CJK) punctuation characters to adjust excessive spacing.
Read more in
Introducing four new international features for CSS.
The @scope
CSS at-rule
Safari 17.4 includes
@scope
letting you select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.
Learn more in
Limit the reach of your selectors with the CSS @scope
at-rule
Picture-in-picture improvements
Chrome 123 includes two features to improve picture-in-picture experiences.
The first is the CSS picture-in-picture
display mode.
This lets you write specific CSS rules that are only applied when
(part of the) the web app is shown in picture-in-picture mode.
The second feature lets you use
opener.focus
from a document picture-in-picture window to bring system-level focus
to the tab that owns the document picture-in-picture window.
This lets you bring the original tab back to the foreground when necessary. For example, when the user needs to access a UI experience that doesn't fit in the smaller picture-in-picture window.
Support for align-content
in block and table layout
Chrome 123 and Safari 17.4 include support for align-content
in block and table layout. Read about
the change to align-content
support.
Service Worker Static Routing API
From Chrome 123, the Service Worker Static Routing API is available. This API lets you declaratively state how certain resource paths should be fetched, meaning that the browser does not need to run a service worker only to fetch responses from a cache, or directly from the network.
Find out more in Use the Service Worker Static Routing API to bypass the service worker for specific paths.
Long Animation Frames API
Chrome 123 also includes The Long Animation Frames API, which is an update to the Long Tasks API to provide a better understanding of slow user interface (UI) updates. This can be useful to identify slow animation frames which are likely to affect the Interaction to Next Paint (INP) Core Web Vital metric which measures responsiveness, or to identify other UI jank which affects smoothness.
The content-visibility
property
Firefox 124 includes support for the CSS
content-visibility
property.
This property controls whether an element renders its content at all,
allowing browsers to omit rendering the content until it is needed.
Additions to ArrayBuffer
and array grouping
In Safari 17.4 JavaScript gets some new features with support for the detached
property and
transfer()
and transferToFixedLength()
methods of ArrayBuffer
.
Safari 17.4 also includes the array grouping methods Object.groupBy
and Map.groupBy
. To learn more about array grouping, read
JavaScript is getting array grouping methods.
These features are now interoperable and therefore join Baseline Newly Available.
setHTMLUnsafe
and parseHTMLUnsafe
The setHTMLUnsafe
and parseHTMLUnsafe
methods shipping in Safari 17.4 allow the
Declarative Shadow DOM to be used from JavaScript.
These methods also offer an easier way to imperatively parse HTML into DOM,
as compared to innerHTML
or DOMParser
.
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 125 and Chrome 124. 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 125 is shaping up to be an exciting release.
It includes align-content
on blocks, making this feature interoperable.
Also included, and therefore becoming part of Baseline Newly Available, is
the Popover API. The transition-behavior
property will also be supported.
Popover and transition-behavior
are part of
Interop 2024.
Chrome 124 includes the setHTMLUnsafe
and parseHTMLUnsafe
methods to
allow the Declarative Shadow DOM to be used from JavaScript, making these
features interoperable. Also included is the
WebSocketStream API,
and the writingsuggestions
attribute.