@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加

Una Kravets

CSS パワーアップの準備をしよう@property ルールは、CSS Houdini API の包括的な機能の一部であり、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御性と柔軟性が高まり、スタイルシートがよりスマートで動的なものになります。

対応ブラウザ

  • Chrome: 85。 <ph type="x-smartling-placeholder">
  • Edge: 85。 <ph type="x-smartling-placeholder">
  • Firefox: 128。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

@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 つの放射状のグラデーションで構成される、微妙な背景アニメーションのカードの例を考えてみましょう。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">で確認できます。 @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 の特殊能力はどんどん強まっています。

追加情報