Chrome 133 中的新变化

Rachel Andrew

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

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 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

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