Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を強く推奨。

CSS Custom Properties (CSS Variables)

接頭辞 -- が付いたプロパティ名、例えば --example-name は、カスタムプロパティを表し、 var() 関数を用いて他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

初期値本文を参照適用対象すべての要素継承あり計算値変数を代入して指定した通りアニメーションの種類離散値

変数設計

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
custom-property
49
15
31
9.1
49
9.3
その他
css.types.var

var() は CSS の関数で、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。
49
15
31
9.1
49
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
:root {
  --color-primary: #2563eb;
  --color-bg: #ffffff;
  --spacing-md: 1rem;
}

.card {
  background: var(--color-bg);
  padding: var(--spacing-md);
  border: 1px solid var(--color-primary);
}

/* Dark theme */
[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-bg: #1e293b;
}

/* Fallback values */
.text {
  color: var(--color-text, #333);
}

ライブデモ

Cssvariable in themedefinition

CSS Custom Properties (CSS Variables) CSSvariable in themedefinition demo.

プレビュー全画面表示

variable. Toggle

CSS Custom Properties (CSS Variables) variable. Toggle demo.

プレビュー全画面表示

fo-backvalue

CSS Custom Properties (CSS Variables) fo-backvalue demo.

プレビュー全画面表示

実務での使いどころ

  • テーマ切替（ライト/ダーク）

    :root の変数を書き換えるだけでサイト全体のテーマを切り替えられる。JS は属性の切替のみで済む。

  • デザイントークンの管理

    色・間隔・フォントサイズなどをCSS変数で一元管理し、デザインの一貫性を維持。

注意点

  • 未定義の変数は initial になる。var() の第2引数でフォールバック値を指定する習慣をつける。
  • 大量のCSS変数はデバッグが困難になる場合がある。命名規則を統一する。

アクセシビリティ

  • ダークテーマではコントラスト比が変わるため、WCAG AA 基準（4.5:1）を各テーマで検証する。
  • prefers-color-scheme メディアクエリと組み合わせてシステム設定を尊重する。

参考リンク