Chrome 127: All New Features Explained

Google Chrome version 127 was released on July 23, 2024, and it brings many important improvements to its users. This update significantly improves the performance, accessibility, and developer tools of the web browser. In particular, the CSS font-size-adjust property, innovations in the document picture-in-picture API, and keyboard-focused scrolling containers are among the notable changes.

CSS ‘font-size-adjust’ Property

The CSS ‘font-size-adjust’ feature, introduced with Chrome 127, significantly improves the readability of fonts. This feature keeps the appearance of text consistent by adjusting the size of a fallback font if the first preferred font fails to load. For example, if you use a font like Verdana on your site and it doesn’t load, a fallback font like Times can be used. With the ‘font-size-adjust’ feature, the lowercase height of the fallback font is matched to the height of the main font, which keeps the text readable in all situations. This allows you to switch between fonts without compromising the user experience.

Document Picture-in-Picture API: Propagating User Activations

Another important new feature is the changes to the Document Picture-in-Picture API. With this update, user events can now be propagated between a picture-in-picture (PiP) window and its openers. This feature allows user actions in the PiP window to also affect the main window. For example, when a video is playing, an interaction in the PiP window can also cause changes to the background of the main window. This change makes it more ergonomic to manage user events in both contexts and improves the performance of interactive applications.

Keyboard Focusable Scroll Containers

Starting with Chrome 127, scroll containers are now keyboard focusable by default. This makes sliders and content easier to access using the keyboard. Previously, a slider element had to have the ‘tabindex’ property explicitly set in order to be tab focusable. Scroll containers are now click and keyboard focusable by default, which is a big accessibility improvement. However, if a slider contains a focusable child element, tab focus will jump directly to that element.