New in Chrome 116

Adriana Jara

Here's what you need to know:

Use the Document Picture in Picture API to increase user productivity.
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.

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.

New in Chrome 116

Document Picture-in-Picture API.

DevTools missing stylesheets debugging improvements.

And more!

Further reading

Subscribe