CSS @property ルール

CSS @property ルール

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

@property ルールはデータタイプのチェックと制約、デフォルト値の設定、属性が値を継承できるかどうかを定義します。

カスタム属性のインスタンスを定義：

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

上記の定義は、 --myColor 色属性であり、親要素の値を継承し、デフォルト値は lightgray です。

CSSでカスタム属性を使用するには、 var() 関数：

body {
  background-color: var(--myColor);
}

使用方法 @property の利点：

• タイプチェック：カスタム属性のデータ型（<number>、<color>、<length>など）を指定する必要があります。これにより、エラーを防ぎ、カスタム属性の正しい使用を確保します。
• デフォルト値の設定：カスタム属性にデフォルト値を設定することができます。これにより、後で無効な値が割り当てられた場合でも、ブラウザは定義された代替値を使用します。
• 継承行為の設定：カスタム属性が親要素の値を継承できるかどうかを指定する必要があります。

ブラウザのサポート

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

シンプルな@propertyインスタンス

以下の例では、2つのカスタム属性が定義されています：--my-bg-color および --my-txt-color。その後、divは background-color および color でカスタム属性を使用しています：

例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

自分で試してみる

別の@propertyインスタンス

以下の例では、<div>要素にデフォルトのカスタム属性を使用しています。その後、 .fresh および .nature クラス内でカスタム属性をオーバーライド（他の色を設定することで）、効果が非常に良いです：

例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

自分で試してみる

タイプチェックと代替値を使用してエラーを避ける

以下の例では、 .nature クラス内のカスタム属性が整数として設定された場合、これは無効であり、ブラウザは以下のものを使用します： initial-value 属性で定義された代替色（lightgray）：

例

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

自分で試してみる

inherits 値を使用して

以下の例では、 inherits 値が設定されています： falseこれは、カスタム属性が親要素から値を継承しないということを意味します。結果を確認してください：

例

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

自分で試してみる

次の例では、 inherits 値が設定されています： trueこれは、カスタム属性が親要素から値を継承するということを意味します。結果を確認してください：

例

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

自分で試してみる

@property を使用してスムーズなアニメーションを作成する

使用方法 @property 以前にアニメーションできない内容をアニメーションできるようにする新しい可能性を提供するルールです：グレーディエーション。以下の例を確認してください：

例

グレーディエーションに2つのカスタムプロパティを指定します：

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

自分で試してみる

CSS @property ルール