New in Chrome 114

Here’s what you need to know:

CSS (#text-wrap-balance) is available to improve text layouts.
Cookies partitioned by top level site (CHIPS)are here.
Popovers are easier than even with the Popover API.
And there’s plenty more.

I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 114.

`text-wrap:balance`.

Use text-wrap-balance to improve text layouts. The animation below shows the difference you can make with this one line.

Try a demo

As a developer, you don’t know the final size, font size, or even language of text. All variables are needed for an effective treatment of text wrapping. Since the browser does know all the factors, with text-wrap:balance you can request the browser to figure out the best balanced line wrapping solution.

The two previous examples are shown together, one is marked as unbalanced and the other as balanced.

The balanced text block is more pleasing to the eye of a reader. It grabs attention better and is overall easier to read.

Balancing headlines will and should be the primary use case for text-wrap: balance . There is a performance cost to balance the text, so to mitigate the cost it only works for up to four lines.

Check out this article with samples and more details to improve your text layouts.

CHIPS: Cookies Having Independent Partitioned State.

CHIPS (Cookies Having Independent Partitioned State), enables opting-in to third-party cookies being partitioned by top-level site using the new cookie attribute Partitioned.

Before CHIPS, when a user visits site A, embedded site C could set a cookie on the user’s machine. If the user then visits site B which also embeds site C, site C could access the same cookie that was set on site A. This allows site C to compile a user’s browsing activity across site A, B, and every site that it is embedded on.

Diagram showing sites and storage with unpartitioned cookies.

While cross-site tracking is an issue, there are valid cross-site cookie needs which can be achieved in a privacy-preserving way with cookie partitioning.

With CHIPS when a user visits site A and embedded content from site C sets a cookie with the Partitioned attribute, the cookie is saved in a partitioned jar only for cookies that site C sets when it’s embedded on site A. The browser would only send that cookie when the top-level site is A.

Diagram showing sites and paritioned storage with cookies.

When the user visits a new site, for example site B, site C would not receive the cookie that was set when C was embedded in site A.

Checkout this article for more details about the process to phase out third party cookies.

With the Popover API it is easier to build transient user interface (UI) elements that are displayed on top of all other web app UI.

These include user-interactive elements like action menus, form element suggestions, content pickers, and teaching UI.

The new popover attribute enables any element to be displayed in the top layer automatically. This means no more worrying about positioning, stacking elements, focus or keyboard interactions for the developer.

This is similar to the <dialog> element, but has several important differences, including light-dismiss behavior, popover interaction management, and event support, and the lack of a «modal» mode.

Checkout this article for more information.

And more!

Of course there’s plenty more.

Devtools lets you pause and debug C and C++ code in WebAssembly apps with DWARF support.
The exclusionFilters option in navigator.bluetooth.requestDevice() allows web developers to exclude some devices from the browser picker..
There is an origin trial for Background Blur.