公開日: 2024 年 7 月 12 日
CSS のパワーアップに備えましょう。CSS Houdini 傘下の API の一部である @property ルールが、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、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 の優れた用途の 1 つは、ブラウザで画像として認識されるグラデーションなど、以前は遷移できなかったプロパティをスムーズにアニメーション化できることです。ただし、@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 のスーパーパワーはさらに強力になりました。