CSSのattr()関数がパワーアップ! また一つJavaScriptでしかできなかったことがCSSだけでできるになります
Post on:2025年1月28日
CSSのattr()
関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、href
に記述した値をリンクとして表示したり、title
に記述した値を画像のキャプションとして表示したり、data-
でさまざまな値を表示することができます。
このattr()
関数がよりパワーアップします。
これまではcontent
プロパティだけでしたが、任意のプロパティで使用できるようになり、<string>
以外のデータ型も使用できるようになります。
HTMLに記述したカラー値やid
の値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。

CSS attr() gets an upgrade
by Bramus!
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
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>
にパースします。
1 2 3 4 5 6 7 |
<style> div { color: attr(data-clr type(<color>), red); } </style> <div data-clr="blue">このテキストはブルーです</div> <div>このテキストはレッドです (フォールバック)</div> |
div
要素にスタイルされているcolor
プロパティの値には、HTMLに記述されたdata-clr
属性の値が使用されます。この属性値はattr()
とtype()
を使用して<color>
にパースされており、red
はフォールバック値です。
より強力になったattr()のデモ
さらに高度な例を見てましょう。
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .card[id] { view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */ view-transition-class: card; } </style> <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> |
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
属性はピクセル値にパースされます。
1 2 3 4 5 6 |
<style> div { font-size: attr(data-size px); } </style> <div data-size="10">test</div> |
attr()
関数を型なしで使用すると、属性がCSSの文字列にパースされます。これは以前の動作と同じです。
sponsors