CSS @property 规则

定義と使用法

CSS @property ルールは、JavaScriptを実行せずにスタイルシートで直接カスタムCSS属性を定義するために使用されます。

@property ルールはデータ型の確認と制約機能を持ち、デフォルト値を設定し、属性が値を継承できるかどうかを定義できます。

を使用して @property 利点：

• データ型の確認と制約：カスタム属性のデータ型（例：<number>、<color>、<length>など）を指定する必要があります。これによりエラーを防ぎ、カスタム属性の正しい使用を確保できます。
• デフォルト値の設定：カスタム属性にデフォルト値を設定できます。これにより、無効な値が指定された場合にブラウザが定義されたリカバリ値を使用するようになります。
• 継承行為の設定：カスタム属性が親要素から値を継承できるかどうかを指定する必要があります。

例：カスタム属性の定義

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

上記の定義は --my-color が色属性であり、親要素から値を継承し、デフォルト値は lightgray であることを示しています。

CSSでカスタム属性の使用：

body {}}
  backgound-color: var(--my-color);
}

インスタンス

例 1

グラデーションに2つのカスタム属性を指定し、それらを使用してグラデーションをアニメーション化します：

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

自分で試してみてください

例 2

2つのカスタム属性を指定します：1つはアイテムのサイズ、もう1つはアイテムの色です：

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

自分で試してみてください

CSS 構文

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

属性値

ブラウザのサポート

テーブルの数字は、@ 规則を完全にサポートする最初のブラウザのバージョンを示しています。

相关页面

教程：CSS @property 规则