@property (registered custom properties)
@property でCSS変数を登録すると、構文（型）・初期値・継承の有無を明示的に指定できる。これにより、通常のCSS変数ではできない色やサイズのトランジション・アニメーションが可能になる。グラデーションのアニメーションなどに特に有効。
概要
@property でCSS変数を登録すると、構文（型）・初期値・継承の有無を明示的に指定できる。これにより、通常のCSS変数ではできない色やサイズのトランジション・アニメーションが可能になる。グラデーションのアニメーションなどに特に有効。
対応ブラウザ
デスクトップ
Chrome 85+
Edge 85+
Safari 16.4+
Firefox 128+
モバイル
Chrome Android 85+
Safari iOS 16.4+
Firefox Android 128+
基本構文
HTML
@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.gradient-box {
--gradient-angle: 0deg;
background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
transition: --gradient-angle 0.6s ease;
}
.gradient-box:hover {
--gradient-angle: 180deg;
}
@property --progress {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}
.progress-bar {
--progress: 0%;
background: linear-gradient(90deg, #16a34a var(--progress), #e5e7eb var(--progress));
transition: --progress 0.4s ease;
}実務での使いどころ
-
グラデーションのアニメーション
通常はアニメーション不可能なグラデーションの角度・色停止位置をスムーズにトランジション。
-
プログレスバーのアニメーション
パーセント値をCSS変数で管理し、スムーズなアニメーション付きプログレスバーを実現。
注意点
- Firefox 128 以降で対応。古い Firefox ではフォールバックが必要。
- syntax に指定できる型が限られている（<color>、<length>、<angle>、<number> など）。
フォールバック戦略
CSS
/* フォールバック: 静的なグラデーション */
.gradient-box {
background: linear-gradient(0deg, #3b82f6, #8b5cf6);
}
/* モダンブラウザ: アニメーション付き */
@supports (background: paint(id)) {
@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
}アクセシビリティ
- アニメーションは prefers-reduced-motion: reduce を尊重し、不要なモーションを無効化する。