1.CSS 的高级 attr() 方法

CSS attr() 函数是 CSS Level 5 中用于检索 DOM 元素的属性值并将其用于 CSS 属性值，类似于 var() 函数替换自定义属性值的方式。其还可以与伪元素一起使用，在这种情况下，将返回伪元素的原始元素上的属性值。

  Mozilla makes browsers, apps, code and tools that put people before profit.

blockquote {
  margin: 1em 0;
}
blockquote::after {
  display: block;
  content: '(source:' attr(cite) ')';
  color: hotpink;
}

Chrome 133 的 attr() 方法支持除 之外的其他类型，并可用于所有 CSS 属性，包括： , , , , , , , , , , , , 等等（除了对伪元素内容的现有支持）。

以下示例 div 的 color 值使用 data-color 属性中的值，使用 attr() 和 type() 将此属性值解析为 ，而默认值设置为 red。

test

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

值得注意的是，attr() 函数可以引用不打算用于样式的属性，且不能包含敏感信息（例如页面上脚本的安全令牌）。因此，开发者不能使用 attr() 来动态构建 URL。

// 以下不生效
help

2.CSS 滚动状态容器查询

Chrome 133 在容器查询的基础上引入了滚动状态容器查询，支持从 CSS 中查询和调整浏览器管理的粘性 (Sticky) 定位、滚动捕捉点和可滚动元素的状态。

滚动状态容器查询支持根据容器的滚动状态 (Scroll State) 为其后代元素设置样式。查询容器可以是滚动容器，也可以是受滚动容器的滚动位置影响的元素。

.stuck-top {
  container-type: scroll-state;
  // 容器类型
  position: sticky;
  top: 0px;
  // 选择响应 scroll-state 查询的子元素
  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

其返回以下状态：

• stuck：粘性定位容器 (Sticky Positioned Container) 卡在滚动框的边缘之一
• snapped：滚动捕捉对齐容器当前水平或垂直捕捉
• scrollable：滚动容器是否可以按查询方向滚动

新的容器类型属性 scroll-state 允许查询容器，例如：

3.CSS text-box, text-box-trim, and text-box-edge

Web 的每种字体都会产生不同数量的块方向空间从而影响元素的大小，且这种混乱的空间占据不易测量。

而从 Chrome 133 开始，text-box 允许开发人员和设计人员定制文本上方和下方的空间，例如:

、 和

。

text-box-trim 属性指定要修剪的边，例如：上方或下方，text-box-edge 属性指定应如何修剪边缘。这些属性允许开发者使用字体规格精确控制垂直间距。

h1 {
  /* 修剪两侧至大写字母 */
  text-box: trim-both cap alphabetic;
  /* 修剪两侧为小写字母 x */
  text-box: trim-both ex alphabetic;
}

4. 支持 Node.prototype.moveBefore

Chrome 133 添加了 DOM 原语 Node.prototype.moveBefore，允许开发者在 DOM 树中移动元素而不重置元素状态。

当移动 (move) 而不是移除 (remove) 和插入 (insert) 时，将保留以下状态：