CSS/@property

@property

@propertyは、CSSカスタムプロパティ（変数）に型、初期値、継承の動作などのメタデータを定義するために使用されるCSSのルールです。このルールを用いることで、カスタムプロパティの挙動をより詳細に制御でき、ブラウザが型チェックや初期値の適用を行えるようになります。

基本的な@propertyの構文は以下の通りです：

@property --<カスタムプロパティ名> {
  syntax: '<値の型>';
  inherits: <true || false>;
  initial-value: <初期値>;
}

--<カスタムプロパティ名>: 定義するカスタムプロパティの名前。必ず--で始める必要があります。
syntax: プロパティで許容される値の型を指定するための[CSS値構文](https://www.w3.org/TR/css-values-4/)。
inherits: このプロパティが継承可能かどうかを指定します（trueまたはfalse）。
initial-value: このプロパティのデフォルト値。

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff0000;
}

この例では、--primary-colorというカスタムプロパティを定義し、以下を指定しています：

このカスタムプロパティは、以下のように使用できます：

div {
  background-color: var(--primary-color);
}

@property --spacing {
  syntax: '<length>';
  inherits: true;
  initial-value: 10px;
}

この例では、--spacingというプロパティを定義し、以下を指定しています：

これにより、次のように使用できます：

.box {
  padding: var(--spacing);
}

@propertyを使用する際、指定するプロパティ名は必ず--で始まる必要があります。
ブラウザサポート: @propertyは一部の最新ブラウザ（例: Chromium系ブラウザ）でのみサポートされています。他のブラウザでは無視されるため、フォールバックのスタイルを用意することが推奨されます。
定義されていないカスタムプロパティを使用すると、デフォルトではinitial-valueが適用されます。

最新のブラウザ対応状況はCan I Useで確認してください。