CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります

CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。

このattr()関数がよりパワーアップします。
これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。

HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。

CSS attr() gets an upgrade
by Bramus!

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• より強力になったattr()
• より強力になったattr()のデモ
• さらに便利な使い方

はじめに

CSSのattr()はCSSの関数で、HTMLの属性に記述した値をCSSで使用できます。これまでattr()関数は疑似要素のcontentプロパティでのみ機能し、値をCSSの<string>にパースすることしかできませんでした。

Chrome 133（2025/2/4に安定版がリリース予定）で、attr()関数がより強力になります。Chrome 133+ではcontentだけでなく、CSSの任意のプロパティでattr()を使用でき、値を<string>以外のデータ型にパースできます。

より強力になったattr()

まずは簡単な例として、data-clr属性を<color>にパースします。

div要素にスタイルされているcolorプロパティの値には、HTMLに記述されたdata-clr属性の値が使用されます。この属性値はattr()とtype()を使用して<color>にパースされており、redはフォールバック値です。

より強力になったattr()のデモ

さらに高度な例を見てましょう。

view-transition-nameプロパティは要素のid属性によって決定されます。属性はview-transition-nameに必要な型である<custom-ident>にパースされます。attr()がなければ、カードごとにview-transition-nameを宣言する必要がありますが、新しいattr()を使用すれば一度で実行できます。

実際の動作はデモをご覧ください。
※Chrome 133+でご覧ください。

各.card要素にはid属性から派生したview-transition-nameが付与されます。

See the Pen
Auto view-transition-name with attr() and type(<custom-ident>) by coliss (@coliss)
on CodePen.

さらに便利な使い方

また、CSSのサイズ単位や%文字に一致する識別子を型に設定することで、値を長さにパースすることもできます。下記の例では、data-size属性はピクセル値にパースされます。

attr()関数を型なしで使用すると、属性がCSSの文字列にパースされます。これは以前の動作と同じです。