New to the web platform in August

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

Rachel Andrew

Stable browser releases

In August 2024, Firefox 129 and Chrome 128 became stable. This post looks at the new features added to the web platform.

Updates to ruby formatting

The HTML <ruby> element is a powerful tool for enhancing text presentation, especially for East Asian languages. This element lets you display phonetic annotations or other supplemental information above or beside base text. From Chrome 128, ruby annotation is line-breakable, and you can style ruby text with the ruby-align CSS property.

Find out more in Line-breakable <ruby> and CSS ruby-align property.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari Technology Preview: supported.

Source

PointerEvent.deviceProperties for Multi-Pen Inking

This change, shipping in Chrome 128, provides a secure and reliable way to identify individual pen (pointers) interacting with the screen to set specific colors or pen shapes for each device interacting with the digitizer. It extends the PointerEvent interface to include a new attribute, deviceProperties. This contains the attribute uniqueId, that represents a session-persistent, document isolated, unique identifier that you can reliably use to identify individual pens interacting with the page.

Promise.try

Also in Chrome 128, Promise.try makes it easier to handle errors with Promises. There's a pattern where you have a function, f. This function may be async, and return a Promise, or it may not. To use Promise semantics to handle errors in both cases, you wrap the function in a Promise. This is usually achieved with new Promise(resolve => resolve(f())).

Promise.try is a more straightforward way to accomplish the same. It lets you start a Promise chain that catches all errors in .catch handlers instead of having to handle both synchronous and asynchronous exception flows.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox Technology Preview: supported.
  • Safari: not supported.

Source

Animate entry effects

Firefox 129 includes two CSS features used for animating entry effects, and these features are now Baseline Newly Available.

The @starting-style rule defines the initial styles on an element before it's rendered on the page. This is required for elements that animate in from display: none, as they need a state from which to animate in.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Entry effects also require the animation of discrete properties, those that can't interpolate between values. This can now be achieved with transition-behavior: allow-discrete or the allow-discrete value in your transition shorthand. This is also now supported in Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Learn more in Now in Baseline: animating entry effects.

Additions to PerformanceResourceTiming

Firefox 129 adds the contentType and responseStatus properties of the PerformanceResourceTiming interface. These indicate the content type of the fetched resource and the HTTP response status code returned when fetching the resource, respectively.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Geolocation toJSON() methods

Also in Firefox 129 is GeolocationCoordinates.toJSON() and GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 now has support for WebDriver BiDi. THis means that you can use Puppeteer with either Chrome or Firefox for automations. Learn more in WebDriver BiDi production-ready in Firefox, Chrome and Puppeteer and Announcing Official Puppeteer Support for Firefox.

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 130 and Chrome 129. 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.

Firefox 130 supports the name attribute of the <details> element grouping <details> elements, where only one element within a group can be open at a time. This lets you create an exclusive accordion without using JavaScript.

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. Currently supported sizing keywords are auto, min-content, max-content, and fit-content.

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.