New in Chrome 130

Pete LePage

Here's what you need to know:

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 130.

Document Picture-in-Picture

The picture-in-picture API is great when you want to pop a video out of a browser tab so you can keep an eye on the video while interacting with other sites or applications. But it only does video.

Spotify's picture-in-picture window

The document picture-in-picture API eliminates that restriction, allowing you to create a picture-in-picture window where you have control over the content. It's great for things like custom video players, video conferencing, and productivity apps. I love what Spotify has done with it in their web player. I get a window with the artwork for the current song, play controls, and can easily add the song to my favorites.

To use it, request a new document picture-in-picture window. The returned promise resolves with a Picture-in-Picture window JavaScript object. Then, use that to add your content to the window.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

With the new preferInitialWindowPlacement property, you can tell Chrome to always open the picture-in-picture window in its default position and size, instead of reusing the position or size of the previous window.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Check out François' post Picture-in-Picture for any Element for lots more details!

CSS nested declarations

CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others. CSS Nesting is Baseline Newly available, and it's been available for almost a year.

There were a few edge cases that didn't work as expected. For example, with the following CSS block, you would expect the background color to be green, since it comes last, but it's red!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

To fix edge cases like this, the CSS working group introduced the nested declarations rule, which is implemented in Chrome 130. Now, that same CSS block results in a green background, as expected. If you were interleaving bare declarations with nested rules, you should double check your code.

Check out Bramus' article CSS nesting improves with CSSNestedDeclarations for a more in-depth explanation.

box-decoration-break

The box-decoration-break CSS property lets you specify how an element's fragments should be rendered when broken across multiple lines, columns, or pages.

No line breaks

For example, this element looks great when everything is on one line.

Line breaks with slices

When the content gets split across multiple lines, decorations like background, box shadow, border, and so on are sliced, creating a rather drastic look.

Line breaks with clone

By adding box-decoration-break: clone, each fragment is rendered independently, creating a much nicer look.

While it's not quite Baseline, it's available in Chrome and Firefox, and is vendor prefixed in Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Check out the box-decoration-break docs on MDN and Rachel's post The box-decoration-break property in Chrome 130 for more details.

And more!

Of course there's plenty more.

Further reading

This covers only some key highlights. Check the following links for additional changes in Chrome 130.

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.

I'm Pete LePage, and as soon as Chrome 131 is released, we'll be right here to tell you what's new in Chrome!