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

関連情報