CSS attr() 升級

Bramus

發布日期：2025 年 1 月 15 日

重新設計的 attr() 函式

使用 CSS attr()，您可以在 CSS 中使用 HTML 屬性的值。attr() 目前只會在擬造元素的 content 屬性中運作，且只能將值剖析為 CSS <string>。

重新設計的 attr() 函式 (自 Chrome 133 版起提供) 可提供更多功能。您現在可以將 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 尺寸單位或 % 字元相符的 ID，藉此將值解析為長度。在以下範例中，系統會將 data-size 屬性解析為像素值。

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

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

當您使用 attr() 時，如果沒有任何類型，它會將屬性解析為 CSS 字串，這與先前的行為相同。

瞭解詳情

如要進一步瞭解 attr()，請參閱規格和 MDN。