Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能 デスクトップ モバイル
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 機能などがあります。

1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

CSS
.bar {
  width: attr(data-width length, 100px);
  background: attr(data-color color, gray);
}

ライブデモ

Data-widthattribute

CSS Data-widthattribute demo.

プレビュー全画面表示

Data-widthattribute

CSS Data-widthattribute demo.

プレビュー全画面表示

defaultvalue

CSS defaultvalue demo.

プレビュー全画面表示

実務での使いどころ

  • データ属性に基づく動的スタイリング

    HTML の data-* 属性の値をCSSプロパティに直接マッピングし、JavaScriptなしでデータ駆動のスタイル変更を実現できます。

注意点

  • 拡張版の attr() はまだ主要ブラウザで実装されていません。現時点では content プロパティでの文字列取得のみが広くサポートされています。

アクセシビリティ

  • attr() で生成されたコンテンツはスクリーンリーダーに読み上げられる場合があります。意味のある情報はHTML側で適切に提供してください。