CSS attr() 已升级

Bramus

发布时间：2025 年 1 月 15 日

借助 CSS attr()，您可以在 CSS 中使用 HTML 属性的值。到目前为止，attr() 仅在伪元素的 content 属性中起作用，并且只能将值解析为 CSS <string>。

从 Chrome 133 开始，重新设计的 attr() 函数可解锁更多功能。现在，您可以将 attr() 与任何 CSS 属性（包括自定义属性）搭配使用，并且它可以将值解析为 <string> 以外的数据类型。

示例

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

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

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

在下一个示例中，view-transition-name 属性由元素的 id 属性确定。该属性会被解析为 <custom-ident>，这是 view-transition-name 所需的类型。如果没有 attr()，您必须为每张卡片声明一个 view-transition-name，而现在您可以一次性完成。

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
  view-transition-class: card;
}

您还可以通过将类型设置为与 CSS 维度单位或 % 字符匹配的任何标识符，将值解析为长度。在以下示例中，data-size 属性被解析为像素值。

<div data-size="10">test</div>

div {
  font-size: attr(data-size px);
}

如果使用 attr() 但未指定任何类型，系统会将属性解析为 CSS 字符串，这与之前的行为相同。

了解详情

如需详细了解 attr()，请参阅规范和 MDN。