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 をご覧ください。