New in Chrome 116

Here’s what you need to know:

Use the Document Picture in Picture API to increase user productivity.
Improve performance by checking the notRestoredReasons property to optimize bfcache use.
It is now easier to debug missing stylesheets in DevTools
And there’s plenty more.

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

Document Picture-in-Picture API.

The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content.

A Picture-in-Picture window playing Sintel trailer video. — A Picture-in-Picture window created with the Document Picture-in-Picture API (demo).

The Picture-in-Picture window in the Document Picture-in-Picture API is similar to a blank same-origin window opened using window.open(), with some differences:

The Picture-in-Picture window floats on top of other windows.
The Picture-in-Picture window never outlives the opening window.
The Picture-in-Picture window cannot be navigated.
The Picture-in-Picture window position cannot be set by the website.

The following HTML sets up a custom video player and a button element to open the video player in a Picture-in-Picture window.

<div id="playerContainer">
<div id="player">
<video id="video"></video>
</div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

The following JavaScript calls documentPictureInPicture.requestWindow() when the user clicks the button to open a blank Picture-in-Picture window. The returned promise resolves with a Picture-in-Picture window JavaScript object. The video player is moved to that window using append().

pipButton.addEventListener('click', async () => {
const player = document.querySelector("#player");

// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();

// Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Check out Picture-in-picture for any element for more details and examples.

`notRestoredReasons` property.

Modern browsers provide an optimization feature for history navigation called the back/forward cache, or bfcache. It enables an instant loading experience when users go back to a page they have already visited.

Check out this video of bfcache in action to understand the speed up it can bring to navigations:

Pages can be blocked from entering the bfcache or be evicted while in bfcache for different reasons, some required by a specification and some specific to browser implementations.

Previously, there was no way for developers to find out why their pages were blocked from using the bfcache in the field, though there was a test in Chrome DevTools.

To enable monitoring in the field, the PerformanceNavigationTiming class has been extended to include a notRestoredReasons property.

This returns an object containing related information on all frames present in the document:

Details such as frame ID and name, to help identify them in the HTML.
Whether they were blocked from using the bfcache.
Reasons why they were blocked from using the bfcache.

This allows developers to take action to make those pages bfcache-compatible, thereby improving site performance.

Check out not restored reasons API for the code sample to find out the reasons your site might not be using bfcache, so you don’t miss out on a performance boost.

DevTools missing stylesheets debugging improvements.

DevTools got a number of improvements to identify and debug issues with missing stylesheets.

First: the Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.

Also the Sources > Editor now underlines and shows inline error tooltips next to failed, @import,url(), and href statements.

Underlined statements with tooltips in the Sources panel.

The Console, in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

The Console provides links to the exact lines with problematic statements.

The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

The Issues panel with links to to sources and requests.

Check out what’s new in DevTools for all the details and more information on DevTools in Chrome 116.

And more!

Of course there’s plenty more.

Motion path allows authors to position any graphical object and animate it along a path specified by the developer.
The display and content-visibility properties are now supported in keyframe animations, which allows exit animations to be added purely in CSS.
The fetch API can now be used with Bring Your Own Buffer readers, reducing garbage collection overhead and copies, and improving responsiveness for users.