New in Chrome 120

Adriana Jara

Here's what you need to know:

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

CloseWatcher API.

An important feature of modal or popup components is that they are easy to close,with a consistent mechanism for doing so. Those mechanisms are called close requests, they are typically the ESC key on desktop platforms, and the back gesture or button on Android.

Web developers had no good way to handle close requests for their own components. This is especially problematic on Android devices, where providing the simple closing behavior for the back gesture is quite complex.

Chrome 120 brings the solution with CloseWatcher, a new API for directly listening and responding to close requests. It also includes upgrades to <dialog> and popover="" to use the new close request framework, so that they respond to the Android back button.

Checkout the CloseWatcher API demo to give it a try.

<details> name attribute

The name attribute for the <details> element makes it easy to implement the accordion pattern using a sequence of <details> HTML elements.

Multiple <details> elements that have the same name form a group. With this setup at most one element in that group can be opened at once.

Here is an example with a group that shares the name cookies:

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

Permission policy violation reports

Permissions policy violation reports are now available, these reports integrate the Permissions policy API that allows developers to control the browser features available to a page, its iframes, and subresources, by declaring a set of policies for the browser to enforce with the Reporting API. The Reporting API provides a generic reporting mechanism for web applications to use to make reports available based on several platform features.

This Permissions Policy API and Reporting API integration allows web developers to configure endpoints, to which permissions policy violation reports will be sent, allowing site owners to see when disallowed features are being requested for their pages in the field.

Controlling browser features with Permissions Policy includes more implementation details.

And more!

Of course there's plenty more.

  • The relaxed CSS nesting implementation allows nested style rules to begin with an element, rather than being wrapped with is() or requiring an ampersand in front.

  • With the enterpictureinpicture action in the Media Session API, websites can register an action handler which can be used to open a Picture-in-Picture or Document Picture-in-Picture window.

  • And a reminder that Chrome is working towards deprecating third party cookies. In January an experiment begins that could affect your website, so it's important that you check Preparing for the end of third-party cookies for auditing and mitigating steps.

Further reading

This covers only some key highlights. Check the links below for additional changes in Chrome 120.

Subscribe

To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

Yo soy Adriana Jara, our team wishes you happy holidays and as soon as Chrome 121 is released, I'll be right here to tell you what's new in Chrome!