New to the web platform in July

Discover some of the interesting features that have landed in stable and beta web browsers during July 2024.

Rachel Andrew

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);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 16.4.

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.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

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.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

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.