CSS は時間の経過とともに進化しており、最もよく使用される機能を簡単に実装できるように新しい機能が追加されています。今日は、CSS をさらに強力にするそのような機能を一度見てみましょう。

@property (at-rule) を使用すると、開発者はカスタム プロパティを定義できます。この投稿では、@property とは何か、なぜそれが役立つのか、そしてその使用方法を実際の例とともに見ていきます。

@property のアットルールとは何ですか?

CSS カスタム プロパティ (変数) は以前から存在しており、色、フォント サイズ、その他のスタイル値などの値を保存して再利用できます。ただし、最近まで、型やデフォルト値の定義などの高度な機能がありませんでした。これは、複雑なアニメーションを実装する場合に特に便利です (これについては今後の投稿で詳しく説明します)。

@property ルールは、js を実行することなく、スタイルシートに直接カスタム プロパティの登録を表します。

基本的な構文

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• 構文: プロパティの予期されるデータ型を定義します。この場合は色 () ですが、、、 などの有効な CSS データ型を使用できます。
• 継承: プロパティ値を子要素に継承するかどうかを決定します。 true または false に設定できます。
• 初期値: 何も指定されていない場合、プロパティのデフォルト値を設定します。

@property を使用する場合

• スムーズな動作を保証するためにカスタム プロパティをアニメーション化または遷移する必要がある場合。
• 無効な値によるバグを避けるためにデータ型 (色、長さ、数値など) を適用します。
• 値が欠落している場合に一貫したスタイルを維持するために、カスタム プロパティのデフォルト値を設定します。
• 親要素と子要素間のカスタム プロパティの継承を制御します。

続きを読む

• MDN ドキュメント @property

元の投稿