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 属性によって決まります。この属性は、view-transition-name に必要な型である <custom-ident> に解析されます。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 をご覧ください。