Chrome 133 最新动态

Android 开发者

于 2025-03-21 17:31:20 发布

阅读量449

点赞数 4

文章标签： chrome 前端

本文链接：https://blog.csdn.net/androiddevs/article/details/146432474

版权

作者 / 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 滚动状态容器查询

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

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

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 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;
}