Dec 06, 2023 12:40:00

'Google Chrome 120' stable version released, easy to implement 'click to open' accordion pattern

The latest stable version of the web browser ' Google Chrome ', version 120.0.6099.63, has been released. By using the details element, you can easily implement the accordion pattern and write CSS nests more easily.

New in Chrome 120 | Blog | Chrome for Developers

https://developer.chrome.com/blog/new-in-chrome-120

New in Chrome 120: CloseWatcher API, name attribute for details, privacy policy reports, and more! - YouTube


◆Supports CloseWatcher API
The 'CloseWatcher API' is now supported as an API that allows an app to appropriately process when a user indicates an intention to close a modal or popup, such as when the Android 'back' button is pressed.

To use it, follow the code below, and when you press the 'back' button on Android or the 'Esc' key on a desktop app, a 'close' event will be notified to the CloseWatcher instance.

◆Supports <details> element

details is an HTML element that allows you to easily implement the accordion pattern. Surround the content with details as shown below, and use the summary element to set the title.

Each time you click 'Details', the contents will be shown or hidden. If you want to apply a specific CSS only to the open state, you can use the open attribute.

◆Feature Policy Violation Report now available

Feature policies allow web developers to disable or change the behavior of specific browser features and APIs. Chrome 120 integrates feature policies with the Reporting API , allowing you to send reports to developers via the Reporting API when feature policy violations occur.

◆Relaxation of CSS nesting conditions
You can now write nested CSS without using the '&' symbol or 'is()'.

◆Other changes
- You can now register an action handler to open picture-in-picture using the media session API .

◆Changes to developer tools
・“Include third-party cookie issues” in the “Issues” panel is turned on by default

- 'node_modules' is set as default in the ignore list of settings

- Changed the debugger's 'Pause on caught exception' setting so that Promise.finally() does not stop when an exception is caught.

- Ability to switch between mouse input and tap input during remote debugging

- You can now move the playhead by clicking on the timeline in the animation panel.
Previously you had to drag the playhead. Additionally, the full name of the animation is now displayed.

- Display documentURL next to #document element in element panel

・The installed Lighthouse version will be updated to '11.2.0'

Google Chrome 120 also includes 10 security bug fixes .

The next stable version, 'Google Chrome 121', is scheduled to be released on January 23, 2024 local time.