【CSS Modules】@propertyアットルールの使い方

@propertyプロパティは、CSSで利用するカスタムプロパティ（CSS変数）の定義情報を保持するプロパティです。この@propertyルールを使用することで、単なる文字列として扱われる通常のCSS変数とは異なり、カスタムプロパティに厳密な型定義、初期値、そして継承挙動を明示的に設定できるようになります。

これにより、ブラウザはカスタムプロパティの値をより正確に解釈し、例えば、色指定のプロパティに不適切な値が設定された場合でも、値の妥当性を検証できるようになります。また、型情報に基づいてプロパティ間のアニメーションやトランジションをスムーズに実行することも可能です。設定できる主な定義情報には、syntax（プロパティが受け入れる値の型、例: <color>や<length>）、initial-value（プロパティが未設定の場合の初期値）、そしてinherits（プロパティの値が子要素に継承されるかどうかを示す真偽値）があります。

@propertyを活用することで、デザインシステムの構築におけるカスタムプロパティの堅牢性を高めたり、コンポーネント開発においてより予測可能で保守しやすいスタイルを定義したりすることが可能になります。この機能は、複雑なCSSを扱う現代のウェブ開発において、カスタムプロパティの強力な基盤を提供し、その柔軟性と信頼性を向上させる重要な役割を果たします。

Copy
1@property --custom-property-name {
2  syntax: "<color>" | "<length>" | "<number>" | "<integer>" | "<angle>" | "<time>" | "<resolution>" | "<transform-function>" | "<transform-list>" | "<image>" | "<url>" | "<custom-ident>" | "<string>" | "<percentage>" | "<flex>" | "<dimension>" | "<gradient>" | "<paint-order>" | "<mask-image>" | "<mask-mode>" | "<path>" | "<display>" | "<overflow>" | "<pointer-events>" | "<position>" | "<repeat-style>" | "<size>" | "<timing-function>" | "<ratio>" | "<geometry-box>" | "<length-percentage>" | "<line-style>" | "<color-profile>" | "<named-image>" | "*" | [ <token>+ ] ;
3  inherits: true | false;
4  initial-value: <value>;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません