CSS パワーアップの準備をしよう@property ルールは、CSS Houdini API の包括的な機能の一部であり、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御性と柔軟性が高まり、スタイルシートがよりスマートで動的なものになります。
@property のメリット
- セマンティックな意味:
@propertyを使用して、カスタム プロパティの型（構文）を定義します。これにより、カスタム プロパティが保持するデータの種類（色、長さ、数値など）をブラウザに伝えることで、予期しない結果を防ぎ、グラデーションのアニメーションなどの新たな可能性をサポートできます。 - 代替値: スタイルの表示が消えることがなくなりました。
@propertyを使用して、カスタム プロパティの初期値を設定します。無効な値が後で割り当てられた場合は、ブラウザは定義済みのフォールバックを適切に使用します。 - エラー処理の改善: 型安全性が強化され、フォールバックを設定できるため、CSS 内で直接テストと検証を行うことが可能になります。
高度なカスタム プロパティを作成する
「標準」のカスタム プロパティを作成するには、プロパティ名の前に -- を付加して設定し、このプロパティに値を指定します。これらのカスタム プロパティの値は、ブラウザによって文字列として解析されます。
次の例は、デフォルト（文字列ベース）のカスタム プロパティを初期化する方法を示しています。
:root {
--myColor: hotpink;
}
文字列以外のセマンティクスなど、「高度なカスタム プロパティ」の利点を活用するには、CSS カスタム プロパティを @property に登録します。
この例では、同じカスタム プロパティが @property で初期化されています。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property で初期化されるカスタム プロパティは、名前と値だけでなく、より詳細な情報を提供します。これには構文型が含まれ、継承は true または false に設定します。
このアプローチの利点は、標準プロパティの場合、そのプロパティに値として色が含まれ、その色がスタイルシートの他の場所で使用されることが期待されることです。値が数値になるようにそのプロパティを更新すると、他の場所でそのプロパティを使用できなくなります。@property を使用すると、代替色が定義され、このプロパティが色の値を保持することを宣言する syntax が定義されます。色以外の値を指定した場合は、代わりに代替値が使用されます。
デモ: きらめくグラデーションの背景
@property の優れた用途の一つは、ブラウザでは画像として認識されるグラデーションなど、以前は移行が不可能だったプロパティのスムーズなアニメーションです。ただし、@property を介して変数の構文上の意味を渡すと、グラデーション ステートメントで使用できます。これで、グラデーション内で宣言された 2 つの値間のアニメーションを記述し、アニメーションを有効にしました。たとえば、異なるタイムラインで色が変化する 2 つの放射状のグラデーションで構成される、微妙な背景アニメーションのカードの例を考えてみましょう。
@property を使用して、背景のグラデーションでアニメーションの色をアニメーション化します。そのためには、カスタム プロパティの値を色として設定します。
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
次に、それらにアクセスして最初のグラデーション背景を作成します。
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
さらに、キーフレームの値を更新します。
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
それぞれをアニメーション化します。
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
おわりに
CSS に登録されたカスタム プロパティは、CSS 変数に意味とコンテキストを提供することで CSS 言語を拡張する、非常に強力な機能です。@property がベースラインに到達した現在、この CSS の特殊能力はどんどん強まっています。