CSS attr() 升級

Bramus

發布日期：2025 年 1 月 15 日

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

Chrome 133 版推出重新設計的 attr() 函式，可解鎖更多功能。現在可以搭配任何 CSS 屬性 (包括自訂屬性) 使用 attr()，並將值剖析為 <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。