Chrome 131 中的新变化

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

• CSS 突出显示继承功能即将发生变化。
• 为 <details> 元素添加了更多 CSS 样式。
• 使用页边距框简化打印版式。
• 还有许多其他功能。

我是 Mariko Kosaka。我们来深入了解一下 Chrome 131 中面向开发者的新功能。

CSS 突出显示继承

::selection 和 ::target-text 伪类的 CSS 突出显示继承方式将发生变化。这为样式继承创建了更直观的模型，并与最近添加的 ::highlight、::spelling-error 和 ::grammar-error 伪类保持一致。

考虑一下这段带有强调文字的代码段。

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

在早期版本的 Chrome 中，如果您选择已强调显示的文字，即使在父级段落元素上设置了 ::selection 伪类，该文字的颜色也不会更改为蓝色。

这是因为它是使用起源元素继承模型实现的。因此，在本例中，::selection 伪类仅与蓝色类的元素匹配，而此段落中的元素不包含蓝色类。

突出显示继承发生变化后，在 Chrome 131 中选择同一文本时，文本的颜色会变为蓝色。

此外还有一些与此相关的更改，因此请务必查看 CSS 选择样式的继承更改，该文档由 Igalia 的 Stephen Chenney 编写，负责此功能。

改进了 <details> 和 <summary> 的样式设置

现在，您可以通过更多选项设置 <details> 和 <summary> 元素的结构样式，以便构建展开式或折叠式 widget。

此版本中引入的更改允许使用 display 属性，并添加了 ::details-content 伪元素，用于设置展开和收起部分的样式。

过去，无法更改 details 元素的显示类型。此限制现已放宽，您可以使用网格或 Flex 布局等内容。

在此由多个 details 元素组成的独家折叠式列表示例中，当其中一个 details 元素展开时，其内容会放置在 summary 旁边。

这通过在 details 元素上使用 Flex 布局来实现。您还可以使用其他显示值（例如 grid）尝试更多布局模式。

如需更深入的说明，请参阅 Bramus 的文章有关设置 <details> 样式的更多选项。

@page 边距框

添加了在打印网页文档或将其另存为 PDF 文件时支持页边距框的功能。

借助页面边线框，您可以定义页面边线区域中的内容。因此，您可以提供自定义页眉和页脚，而不使用由浏览器生成的内置页眉和页脚。

页边距使用 CSS 中的 @page 规则定义。

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

边距盒的外观和内容是使用生成的内容在 at 规则中表示 16 个边距盒的 CSS 属性中指定的。

对于页码，系统还支持使用计数器，其中 page 表示当前页码，pages 表示总页数。

如需更详细的说明，请参阅 Rachel 的文章使用 CSS 将内容添加到网页边线 。

等等！

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

• 支持“clip-path”“fill”“stroke”和“marker”的外部 SVG 资源。
• WebHID 在专用工作器上下文中处于启用状态。
• 使用 font-variant-emoji CSS 属性控制表情符号的行为。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 131 中的其他变更，请参阅以下链接。

• Chrome 131 的版本说明。
• Chrome 开发者工具 (131) 中的新变化
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

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

我叫 Mariko Kosaka，在 Chrome 132 发布后，我们将立即为您介绍 Chrome 的新变化！