New in Chrome 114
Here's what you need to know:
- CSS [
text-wrap: balance] (#text-wrap-balance) is available to improve text layouts.
- Cookies partitioned by top level site (CHIPS) are here.
- Popovers are easier than ever 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 to improve text layouts. The animation below shows the difference you can make with this one line.
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 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
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.
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.
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.
The Popover API.
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.
Of course there’s plenty more.
- DevTools lets you pause and debug C and C++ code in WebAssembly apps with DWARF support.
navigator.bluetooth.requestDevice()allows web developers to exclude some devices from the browser picker..
- There is an origin trial for Background Blur.
This covers only some key highlights. Check the links below for additional changes in Chrome 114.
- What's new in Chrome DevTools (114)
- Chrome 114 deprecations and removals
- ChromeStatus.com updates for Chrome 114
- Chromium source repository change list
- Chrome release calendar
Yo soy Adriana Jara, and as soon as Chrome 115 is released, I'll be right here to tell you what's new in Chrome!