CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。

@propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。

@property: Next-gen CSS variables now with universal browser support
by Una Kravets

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• @propertyのメリット
• @propertyによるカスタムプロパティの記述方法
• @propertyの使い方: きらめくグラデーション背景
• 終わりに

はじめに

CSSのパワーアップに備えましょう！ CSS Houdini（CSSの拡張性のために誕生したAPIの総称）の一つである@propertyルールが、すべてのモダンブラウザの安定版でサポートされました。

@propertyのサポートブラウザ

@propertyは2024年7月にFirefoxにサポートされ、デスクトップ版・スマホ版のすべてのブラウザにサポートされました。

この画期的な機能により、CSSのカスタムプロパティ（CSS変数とも呼ばれます）の制御と柔軟性が新たなレベルに引き上げられ、スタイルシートがよりスマートでダイナミックになります！

@propertyのメリット

@propertyルールを使用するメリットは、下記の通り。

• セマンティック

  @propertyを使用して、カスタムプロパティの型（構文）を設定します。これにより、カスタムプロパティが保持するデータの種類（カラー・サイズ・数値など）がブラウザに通知され、予期せぬ結果が防止され、グラデーションのアニメーション化などの新しい可能性がサポートされます。

• フォールバック

  スタイルが失敗することはもうありません。@propertyを使用して、カスタムプロパティの初期値を設定します。もし無効な値が代入されても、ブラウザは定義されたフォールバック値をスタイルに適用します。

• エラー処理の改善

  強化された構文の安全性とフォールバック機能により、CSS内で直接テストと検証をおこなえる新しい機会が開かれます。

@propertyによるカスタムプロパティの記述方法

まずは、これまでのカスタムプロパティをおさらいします。
カスタムプロパティは--を付けたプロパティ名と値を設定します。カスタムプロパティの値は、ブラウザによって文字列として解析されます。

下記は、デフォルト（文字列ベース）のカスタムプロパティがどのように初期化されるかを示しています。

文字列以外のセマンティクスを含む「高度なカスタムプロパティ」の利点を活用するには、カスタムプロパティを@propertyで設定します。

下記は、同じカスタムプロパティを@propertyで初期化したものです。

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

これまではそのプロパティに値としてカラーが含まれていることが予想され、そのカラーをスタイルシート内の他の場所で使用していましたが、もし誰かがそのプロパティをアップデートして値を数値にした場合、そのプロパティは他の場所で失敗することになります。@propertyによるカスタムプロパティの利点は、initial-valueでフォールバックを定義することができ、syntaxでこのプロパティはカラー値を保持する必要があることを宣言できます。そのため、カラー以外の値が使用されても、代わりにフォールバックが機能します。

メモ:
CSS.registerProperty()を使用して、JavaScriptで構文、継承、初期値を使用してカスタムプロパティを設定できます。また、style.setProperty();でカスタムプロパティ値を操作することもできます。

@propertyの使い方: きらめくグラデーション背景

@propertyの優れた使い方の一つに、これまではトランジションが不可能だったプロパティのスムーズなアニメーションです。たとえば、グラデーションはブラウザによって画像として認識されます。しかし、@propertyでカスタムプロパティに構文的な意味を与えると、グラデーション・ステートメントで使用することができます。

これにより、グラデーション内で宣言された2つの値間のアニメーションを記述することができ、アニメーションが可能になります。デモページをご覧ください。2つの放射状グラデーションで構成された繊細な背景アニメーションを持つカードで、グラデーションのカラーは異なる時間軸で変化します。

See the Pen
CSS @property animated bg card by coliss (@coliss)
on CodePen.

まずは、カスタムプロパティ値をカラーとして設定します。

続いて、初期のグラデーション背景を作成します。

さらに、キーフレーム値を設定します。

最後に、アニメーション化します。

終わりに

CSSの@propertyで定義されたカスタムプロパティは、CSS変数にセマンティックとコンテキストを与えることで、CSS言語を拡張する非常に強力な機能です。現在、@propertyはベースラインに追加されたことで、CSSはますます強力にパワーアップします。