【CSS Modules】initial-valueアットルール記述子の使い方

initial-valueプロパティは、CSSのカスタムプロパティに設定される初期値を保持するプロパティです。このプロパティは、CSSの@property at-ruleの中で利用されます。@property at-ruleは、標準以外のカスタムプロパティをCSSに登録し、そのカスタムプロパティの型、値が継承されるかどうか（継承性）、そして初期値を定義するための新しい機能です。

initial-valueプロパティは、特にこの@propertyルール内で、定義しようとしているカスタムプロパティにまだ値が明示的に割り当てられていない場合に、デフォルトでどのような値を持つべきかを指定するために使用されます。例えば、--primary-colorというカスタムプロパティを定義する際に、initial-value: #007bff;と設定することで、このカスタムプロパティがどこにも値がセットされていない状態でも、常に#007bffという値を持つことが保証されます。

これにより、CSSでカスタムプロパティを使用する際に、未定義の状態による予期せぬスタイルの崩れを防ぐことができます。また、var()関数でカスタムプロパティを参照した際に、フォールバック値が提供されなかった場合でも、このinitial-valueに指定された値が適用されるため、より堅牢で予測可能なスタイルシートを構築することが可能になります。CSSカスタムプロパティの動作を明確にし、開発の効率と安定性を向上させるための重要な要素です。

Copy
1@property --example-color {
2  syntax: "<color>";
3  inherits: false;
4  initial-value: blue;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません