公開日: 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 文字列に解析されます。これは以前の動作と同じです。