Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を強く推奨。
構文・カスケード Widely available

CSS Custom Properties (CSS Variables)

CSS Custom Properties（通称CSS変数）は --name 構文で定義し、var() 関数で参照する。カスケードと継承に従い、メディアクエリやJSから動的に変更可能。プリプロセッサ変数と異なり、ランタイムで値が解決される。

変数設計

概要

CSS Custom Properties（通称CSS変数）は --name 構文で定義し、var() 関数で参照する。カスケードと継承に従い、メディアクエリやJSから動的に変更可能。プリプロセッサ変数と異なり、ランタイムで値が解決される。

対応ブラウザ

デスクトップ

Chrome 49+
Edge 15+
Safari 9.1+
Firefox 31+

モバイル

Chrome Android 49+
Safari iOS 9.3+
Firefox Android 31+

基本構文

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);
}

/* ダークテーマ */
[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-bg: #1e293b;
}

/* フォールバック値 */
.text {
  color: var(--color-text, #333);
}

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク