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 <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.
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 <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.