What's new in Chrome 130?

This article is a translation of the original article “New in Chrome 130“

I also run a telegram channel “Frontend in naval style“, where I talk about interesting things from the world of interface development.

Introduction

Here's what you need to know:

I'm Pete LePage. Let's find out what's new for developers in Chrome 130.

Document Picture-in-Picture

The Picture-in-picture API is great when you want to display a video in a browser tab so you can follow it while interacting with other sites or applications. But it only works with video.

The Document picture-in-picture API removes this limitation by allowing you to create windows in which you can manipulate the content. It's great for things like custom video players, video conferencing, and productivity apps. I like how Spotify uses it in their web player. I get a window with an illustration of the current song, playback controls, and can easily add the song to my favorites.

To use it, please request a new document. Returnable promise Resolved by a JavaScript picture-in-picture window object. Then use it to add 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);

Using the new property preferInitialWindowPlacement You can tell Chrome to always open a picture-in-picture window at its default position and size, rather than using the position or size of the previous window.

// Откройте окно "картинка в картинке" в стандартном положении / размере.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

Check out Francois's post”Picture-in-picture for any element” for more details!

Nested declarations in CSS

CSS nesting allows you to shorten selectors, make them easier to read, and increase modularity by nesting rules within others. CSS Nesting is a new baseline product that has been available for almost a year. There were a few instances where it didn't work as expected. For example, in the following CSS block, you would expect the background color to be green since it comes last, but it is red!

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

To fix situations like this, the CSS Working Group introduced the nested ad rule, which is implemented in Chrome 130. Now the same CSS block produces a green background as expected. If you have been alternating bare declarations with nested rules, you should recheck your code. Check out the Bramus article “CSS nesting is improved with CSSNestedDeclarations” for a more detailed explanation.

box-decoration-break

CSS property box-decoration-break allows you to specify how fragments of an element, divided into several rows, columns or pages, should be displayed. For example, this element looks great when everything is on the same line.

When content is split across multiple lines, elements such as the background, frame shadow, borders, etc. are chopped up, creating a rather jarring appearance.

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

While it's not exactly Baseline, it's available in Chrome and Firefox, and there's a prefix for Safari.

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

Check out the documentation for box-decoration-break on MDN and with Rachel's post”Box-decoration-break property in Chrome 130” for more details.

And more!