Discover some of the interesting features that have landed in stable and beta
web browsers during July 2024.
Stable browser releases
In July 2024, Firefox 128,
Safari 17.6, and
Chrome 127 became stable.
This post looks at the new features added to the web platform.
CSS Relative color syntax
Firefox 128 includes
CSS relative color syntax,
this lets you create a color relative to an origin color.
The following CSS desaturates the color indigo by half, using hsl().
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
You can find many more examples in the blog post
CSS relative color syntax.
Relative color syntax is one of the focus areas for Interop 2024,
so this update helps to improve the score for stable Firefox.
Alternative text for the content property
Firefox 128 supports alternative text for the CSS content property,
when it includes an image. The alt text is exposed to the accessibility tree.
This means that alternative text is now supported by all browsers for content.
An update in Chrome 127 ensures that Chrome accepts an arbitrary number of
elements rather than just a single string, enabling the use of the attr()
function, for example.
The font-size-adjust property
Chrome 127 includes font-size-adjust, also a focus area for Interop 2024.
This property is useful for situations where font fallback can occur,
as it helps you match the size of a fallback font to the first choice font.
With this Chrome release the font-size-adjust property becomes part of
Baseline Newly Available.
Support for the View Transition API in iframes
From Chrome 127 concurrent same-document view transitions in a main frame and same-origin iframe will be available.
Previously, running a view transition using the document.startViewTransition in a same-origin iframe wouldn’t work if the main frame was running a transition at the same time. The iframe’s transition would be automatically skipped. Now, both transitions will execute.
Keyboard focusable scroll containers
From Chrome 127 scrollers are click-focusable and programmatically-focusable
by default. Scrollers without focusable children are keyboard-focusable by default.
Learn more about this change in the post
Keyboard focusable scrollers.
The @property rule
Firefox 128 includes support for the @property rule and related JavaScript
APIs. This means you can create CSS custom properties that define a syntax,
inheritance, and an initial value.
In the following example the custom property is defined to accept a <color>
value only, to not inherit, and to have an initial value of hotpink.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
The @property rule is now part of Baseline Newly Available, read more in
@property: Next-gen CSS variables now with universal browser support.
Resizable ArrayBuffer and growable SharedArrayBuffer
Resizeable
ArrayBuffer
and growable
SharedArrayBuffer
are now supported in Firefox 128,
allowing the size of buffers to be changed without having to allocate a
new buffer and copy data into it.
These properties also join Baseline Newly Available.
The safe keyword in flexbox properties
Safari 17.6 is mostly a release of fixes to existing features,
however it also includes the safe keyword for flexbox alignment properties.
This makes the safe keyword interoperable across browsers.
The safe keyword
prevents a chosen alignment from causing content to display outside of the
viewable area. The following CodePen shows how this acts
with center aligned items. If the center alignment causes data loss then
start is used instead.
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 129 and
Chrome 128. The
Safari 18
beta is still ongoing.
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.
Chrome 128 includes the CSS ruby-align property, along with changes to
make line breaks possible within elements that have display: ruby, the
zoom property has also been updated to match the specification. There’s
an update to the AudioContext API to add a callback assigned to
AudiContext.onerror, that reports AudioContext creation and rendering errors.
Firefox 129 includes the @starting-style rule and the transition-behavior
property. These properties will become part of Baseline Newly Available once
Firefox 129 is released to stable.