次世代 CSS 変数がユニバーサル ブラウザー サポートに対応 | ブログ | web.dev

CSSパワーアップの準備をしましょう！ @property CSS Houdini API 傘下の一部であるルールは、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ (CSS 変数とも呼ばれます) の制御と柔軟性が新たなレベルに引き上げられ、スタイルシートがよりスマートで動的になります。

のメリット @property

• 意味論的意味: 使用 @property カスタム プロパティのタイプ (構文) を定義します。これにより、カスタム プロパティが保持するデータの種類 (色、長さ、数値など) がブラウザーに通知され、予期しない結果が防止され、グラデーションのアニメーション化などの新しい可能性がサポートされます。
• フォールバック値: スタイルが消えることはもうありません！ @propertyカスタム プロパティの初期値を設定します。後で無効な値が割り当てられた場合、ブラウザーは定義されたフォールバックを適切に使用します。
• エラー処理の改善: 強化された型の安全性とフォールバックを設定する機能により、CSS 内で直接テストと検証を行う新しい機会が生まれます。

高度なカスタムプロパティを作成する

「標準」カスタムプロパティを作成するには、プロパティ名の前に -- このプロパティに値を指定します。これらのカスタム プロパティの値は、ブラウザーによって文字列として解析されます。

次の例は、デフォルトの (文字列ベースの) カスタム プロパティを初期化する方法を示しています。

:root {
 --myColor: hotpink;
}

文字列を超えたセマンティクスを含むこれらの「高度なカスタムプロパティ」の利点を得るには、CSSカスタムプロパティを次のように登録します。 @property。

この例では、同じカスタムプロパティが次のように初期化されます。 @property。

@property --myColor {
    syntax: '';
    inherits: false;
    initial-value: hotpink;
  }

初期化されたカスタムプロパティ @property 名前と値だけでなく、より詳細な情報を提供します。構文タイプが含まれ、継承を true または false に設定します。

このアプローチの利点は、標準プロパティでは、そのプロパティに値として色が含まれており、その色をスタイルシートの他の場所で使用することが期待されることです。誰かがそのプロパティを更新して値として数値を持つようにした場合、他の場所でのプロパティの使用は失敗します。 @property フォールバックカラーが定義されており、 syntax このプロパティを宣言する要素には色の値が必要です。色以外の値が使用される場合は、代わりにフォールバックが使用されます。

デモ: きらめくグラデーション背景

の優れた応用例の1つは @property グラデーションのように、これまでは遷移が不可能だったプロパティをスムーズにアニメーション化します。ブラウザでは画像として認識されます。ただし、変数に構文上の意味を与えると、 @propertyこれらはグラデーション ステートメントで使用できます。これで、グラデーション内の 2 つの宣言された値間のアニメーションを記述し、アニメーションを有効にできます。次の例を見てみましょう。異なるタイムラインで色が変化する 2 つの放射状グラデーションで構成された微妙な背景アニメーションを持つカードです。

これは、カスタム プロパティ値を色として設定することで実現できます。

@property --card-bg {
  syntax: "";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "";
  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 スーパーパワーは、さらに強力になっています。

追加資料