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.