New to the web platform in August | Blog | web.dev
Discover some of the interesting features that have landed in stable and beta
web browsers during August 2024.
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 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 and CSS ruby-align property.
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.
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.
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.
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
responseStatus
Geolocation toJSON() methods
Also in Firefox 129 is GeolocationCoordinates.toJSON() and GeolocationPosition.toJSON().
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
element grouping
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.