Chrome 130 中的新变化

Pete LePage

以下是您需要知晓的相关信息：

我是 Pete LePage。我们来深入了解一下 Chrome 130 中面向开发者的新功能。

文档画中画

当您想从浏览器标签页中弹出视频，以便在与其他网站或应用互动时也能关注视频时，画中画 API 非常有用。但它只能播放视频。

Spotify 的画中画窗口

文档画中画 API 消除了这一限制，让您可以创建画中画窗口，并控制其中的内容。它非常适合自定义视频播放器、视频会议和效率应用等。我很喜欢 Spotify 在其网络播放器中对其所做的改进。 我会看到一个窗口，其中显示了当前歌曲的海报图片、播放控件，并且可以轻松地将这首歌曲添加到我的收藏夹中。

如需使用此功能，请请求新的文档画中画窗口。返回的 promise 会解析为画中画窗口 JavaScript 对象。然后，使用该组件将内容添加到窗口中。

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

pipButton.addEventListener('click', openDPiP);

借助新的 preferInitialWindowPlacement 属性，您可以指示 Chrome 始终以默认位置和大小打开画中画窗口，而不是重复使用上一个窗口的位置或大小。

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

如需了解更多详情，请参阅 François 的博文为任何元素启用画中画！

CSS 嵌套声明

CSS 嵌套可将规则嵌套在其他规则中，从而缩短选择器、简化阅读并提高模块化程度。CSS 嵌套属于基准“新推出”，已推出将近一年。

有几个极端情况未能按预期运行。例如，对于以下 CSS 块，您希望背景颜色为绿色，因为它位于最后，但它却是红色！

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

为了解决此类边缘情况，CSS 工作组引入了嵌套声明规则，该规则在 Chrome 130 中得到了实现。现在，该 CSS 块会产生绿色背景，符合预期。如果您将裸声明与嵌套规则交错，则应仔细检查您的代码。

如需查看更深入的讲解，请参阅 Bramus 的文章 CSS 嵌套通过 CSSNestedDeclarations 得到改进。

box-decoration-break

借助 box-decoration-break CSS 属性，您可以指定元素 Fragment 在拆分到多行、多列或多页时应如何呈现。

无换行符

例如，当所有内容都显示在一行时，此元素看起来会很棒。

使用 slice 实现换行

当内容被拆分为多行时，背景、框阴影、边框等装饰就会被切开，从而打造出非常醒目的外观。

使用克隆功能添加换行符

通过添加 box-decoration-break: clone，每个 fragment 都会独立呈现，从而打造更加美观的外观。

虽然尚未完全确定基准，但可在 Chrome 和 Firefox 中使用，并在 Safari 中使用供应商前缀。

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

如需了解详情，请参阅 MDN 上的 box-decoration-break 文档以及 Rachel 的帖子 Chrome 130 中的 box-decoration-break 属性。

等等！

当然，还有许多其他功能。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 130 中的其他变更，请参阅以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage。Chrome 131 发布后，我们会立即在此处向您介绍 Chrome 中的新变化！