Chrome 133 中的新变化

Rachel Andrew

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

CSS 高级 attr() 函数允许使用除 <string> 之外的类型，并可用于所有 CSS 属性。
借助 CSS 滚动状态容器查询，您可以根据容器的滚动状态，使用容器查询来设置容器后代的样式。
借助 CSS text-box、text-box-trim 和 text-box-edge，可以更精细地控制文本的纵向对齐方式
还有更多。

CSS 高级 `attr()` 函数

此功能在现有的 attr() 函数的基础上，添加了 CSS 级别 5 中指定的功能。这样一来，除了 <string> 之外的类型也可以使用，并且可用于所有 CSS 属性（除了对伪元素内容的支持之外）。

在以下示例中，div 的 color 属性的值使用 data-color 属性中的值。此属性值使用 attr() 和 type() 解析为 <color>。回退值设置为 red。

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

如需了解详情，请参阅 CSS attr() 迎来升级。

CSS 滚动状态容器查询

使用容器查询根据容器的滚动状态为容器的后代设置样式。

查询容器可以是滚动容器，也可以是受滚动容器的滚动位置影响的元素。您可以查询以下状态：

stuck：粘性定位的容器会固定在滚动框的某个边缘。
snapped：滚动贴靠对齐的容器当前已水平或垂直贴靠。
scrollable：滚动容器是否可以在查询的方向上滚动。

一种新的容器类型：scroll-state 允许查询容器。例如：

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

如需了解详情和查看一些演示，请参阅 CSS 滚动状态查询。

CSS `text-box`、`text-box-trim` 和 `text-box-edge`

text-box-trim 属性用于指定要剪裁的边（上方或下方），text-box-edge 属性用于指定应如何剪裁边缘。

借助这些属性，您可以使用字体指标精确控制垂直间距。

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

了解如何在 CSS text-box-trim 中使用这些新属性。

以及更多！

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

Animation.overallProgress可让您以便捷且一致的方式了解动画在各个迭代中的进度，无论其时间轴的性质如何。
借助 Node.prototype.moveBefore，您可以在 DOM 树中移动元素，而无需重置元素的状态。
FileSystemObserver 接口会向网站通知文件系统中的更改。
借助 PublicKeyCredential getClientCapabilities() 方法，您可以确定用户的客户端支持哪些 WebAuthn 功能。

如需详细了解这些功能以及 Chrome 中的许多其他新功能，请参阅完整的 Chrome 133 版本说明！

深入阅读

以下仅介绍了一些重点内容。如需了解 Chrome 133 中的其他更改，请参阅以下链接。

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

Chrome 133 发布后，我们会立即在此处告知您 Chrome 中的新变化！

Chrome 133 中的新变化 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

CSS 高级 attr() 函数