initial-value
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
initial-value は @property アットルールの記述子で、登録された CSS カスタムプロパティの初期値を指定します。
syntax 記述子の値が全称構文 (*) でない限り、必須の記述子です。
必須であるにもかかわらず欠落しているか不正な場合、@property ルール全体が無効となり無視されます。
構文
/* Set initial color value */
initial-value: rebeccapurple;
/* Set initial length value */
initial-value: 16px;
値
syntax 記述子で指定された型に一致する値です。
例えば、syntax が <color> の場合、initial-value は有効な color 値でなければなりません。
syntax 記述子の値が全称構文定義でない場合、initial-value 記述子は計算上独立した値でなければなりません。これは、CSS に依存しない「グローバル」定義を除き、それ以外にも他の値に依存せずに計算値に変換可能であるということです。例えば10px は計算上独立しており、計算値に変換されても変化しません。2in も同時に有効です。1in は常に 96px と等価だからです。しかし 3em は無効です。em の値は親要素の font-size に依存するためです。
公式定義
形式文法
initial-value =
<declaration-value>?
例
カスタムプロパティに初期値を設定
この例は、初期色値を #c0ffee とするカスタムプロパティ --my-color の定義方法を示しています。この初期値は、プロパティが継承されない場合 (inherits: false) かつ要素に他の値が設定されていない場合に使用されます。
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
JavaScript の CSS.registerProperty() を使用すると次のようになります。
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
仕様書
| Specification |
|---|
| CSS Properties and Values API Level 1 # initial-value-descriptor |