CSS プロパティと値 API
CSS プロパティと値 API (CSS properties and values API) モジュールは、モジュールは、新しい CSS プロパティを登録するための方法を定義し、プロパティのデータ型、継承動作、そしてオプションとして初期値を定義します。
この API は、 CSS 変数のカスケードのためのカスタムプロパティモジュールにおける、 CSS において二重ダッシュ構文 (--
) を使用したカスタムプロパティが定義できる機能をを拡張します。
CSS プロパティと値 API は API における CSS Houdini の傘下にあります。
カスタムプロパティを使用すると、プロジェクト全体で値を再利用できるため、複雑なスタイルシートや繰り返しの多いスタイルシートを簡素化できます。
基本的なカスタムプロパティは、 CSS 変数のカスケードのためのカスタムプロパティモジュールで定義されています。
CSS プロパティと値 API はこのモジュールを拡張し、このモジュールを拡張し、 CSS で @property
アットルールを使用したり、 JavaScript で CSS.registerProperty
メソッドを使用したりして、カスタムプロパティにメタデータを追加できるようにします。
登録が CSS であれ JavaScript であれ、カスタムプロパティにメタデータを設定することで、ブラウザーがコンテキストに応じて使用できる期待されるデータ型を提供し、初期値を定義し、継承を制御することができます。
CSS プロパティと値 API のカスタムプロパティの登録は、より基本的な CSS のカスケード変数によるカスタムプロパティ宣言よりも堅牢であり、特に値のトランジションやアニメーションに関しては、ブラウザーがこの種のカスタム値の間を補間することができるため、二重ダッシュ構文(--
) を使用するプロパティが文字列置換のように動作するのに比べて、より堅牢です。
プロパティと値の API の動作
カスタムプロパティと値がAPI経由でどのように使用できるかを確認するには、下のボックスにカーソルを当ててください。
このボックスは背景 が --stop-color
(カスタムプロパティ)から lavenderblush
までの線形グラデーションで構成されています。
最初、 --stop-color
の値は cornflowerblue
に設定されていますが、ボックスにカーソルを合わせると、 2 秒かけて --stop-color
のトランジション が aquamarine
まで遷移します(linear-gradient(to right, aquamarine, lavenderblush)
)。
リファレンス
アットルール
インターフェイスと API
ガイド
- CSS プロパティと値 API の使用
-
CSS や JavaScript でカスタムプロパティを登録する方法について、未定義値や無効値の扱い方、代替、継承などのヒントを交えて解説しています。
- CSS Houdini
-
CSS Houdini とは何か、その利点について、利用可能な API とそのステータスの一覧とともに説明します。
関連概念
仕様書
Specification |
---|
CSS Properties and Values API Level 1 |
関連情報
- CSS カスケードと継承
- CSS スコープモジュール
- シャドウ DOM の使用
- CSS 描画 API
- Worklet インターフェイス
- CSS
env()
- CSS 型付きオブジェクトモデル