attr()
メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 content 以外のプロパティでの対応は実験的です。
attr() は CSS の関数で、選択した要素の属性の値を取得し、それをプロパティ値で使用するために使用されます。これは、 var() 関数が独自のプロパティ値を置き換える方法と似ています。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.attr.declaration-value | 133 | 133 | 119 | 18.4 | 133 | 18.4 |
| CSS タイプ | ||||||
type function 実験的 `type(<syntax>)` 関数 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 gradient 関数や一部の transform 関数などで使われています。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、1 つの色を表します。 はアルファチャネルの透過値を含むことがあり、この色を背景とどれだけ混合するかを示すこともできます。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、identifierとして使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、identifierとして使用される任意の文字列を意味します。 | 133 | 133 | 149 | | 133 | |
| は CSS の データ型で、2 次元の画像を表現します。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、 number の特殊型であり、正と負の整数を表現します。整数は数多くの CSS プロパティや記述子で使用することができます。例えば column-count, counter-increment, grid-column, grid-row, z-index プロパティや @counter-style/range 記述子などです。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、長さの値を表します。長さは width、height、margin、padding、border-width、font-size、text-shadow など数多くの CSS プロパティで使用されています。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、 length または percentage が取りうる値を表します。 | 133 | 133 | 149 | | 133 | |
| は CSS の データ型で、整数、小数部分のある数値、科学記法における 10 進数の指数を表します。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 width、 height, margin, padding、 font-size など、たくさんのプロパティでパーセント値を使うことができます。 | 133 | 133 | 149 | | 133 | |
| は CSS の データ型 で、解像度をメディアクエリーで記述するのに使われ、出力機器のピクセル密度である解像度を表します。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、一連の文字列を表します。文字列は content, font-family, quotes など、数々の CSS プロパティで使用されます。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、時間の値を秒単位またはミリ秒単位で表現します。これは animation や transition および関連するプロパティで使用されています。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、要素の外見に影響する座標変換を表します。座標変換関数は、 2D または 3D 空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。 | 133 | 133 | 149 | | 133 | |
| は CSS のデータ型で、リソースを指します。リソースには画像、動画、CSS ファイル、フォントファイル、SVG 機能などがあります。 | | | | | | |
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
- ブラウザの実験的フラグを有効にする必要があります
基本構文
.bar {
width: attr(data-width length, 100px);
background: attr(data-color color, gray);
} ライブデモ
実務での使いどころ
-
データ属性に基づく動的スタイリング
HTML の data-* 属性の値をCSSプロパティに直接マッピングし、JavaScriptなしでデータ駆動のスタイル変更を実現できます。
注意点
- 拡張版の attr() はまだ主要ブラウザで実装されていません。現時点では content プロパティでの文字列取得のみが広くサポートされています。
アクセシビリティ
- attr() で生成されたコンテンツはスクリーンリーダーに読み上げられる場合があります。意味のある情報はHTML側で適切に提供してください。