Chrome 130 中的新变化

Pete LePage

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

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

画中画文档

如果您想将视频从浏览器标签页中弹出，以便在与其他网站或应用互动时继续观看视频，画中画 API 非常适合。但它只能处理视频。

Spotify 的画中画窗口

文档画中画 API 消除了这一限制，让您可以创建画中画窗口，并控制其中的内容。它非常适合自定义视频播放器、视频会议和效率提升应用等。我非常喜欢 Spotify 在其 Web 播放器中对该功能所做的改进。 系统会显示一个窗口，其中包含当前歌曲的封面、播放器控件，并且我可以轻松地将歌曲添加到收藏夹。

如需使用此功能，请请求新的文档画中画窗口。返回的 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 嵌套功能已进入 Baseline 新近可用阶段，并且已推出近一年。

存在一些无法按预期运行的极端情况。例如，对于以下 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 属性，您可以指定元素片段在跨多行、多列或多页时应如何呈现。

无换行符

例如，当所有内容都位于一行时，此元素看起来效果很好。

使用切片的换行

当内容跨多行显示时，背景、框阴影、边框等装饰会遭到切分，从而产生相当突兀的外观。

使用克隆功能实现换行

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

虽然它还未达到 Baseline 标准，但已在 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 Developers YouTube 频道，这样您就能在每次我们发布新视频时收到电子邮件通知。

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