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経由でどのように使用できるかを確認するには、下のボックスにカーソルを当ててください。

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});

.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}

<div class="box"><p>トランジション付きの線形グラデーション</p></div>

このボックスは背景が --stop-color （カスタムプロパティ）から lavenderblush までの線形グラデーションで構成されています。最初、 --stop-color の値は cornflowerblue に設定されていますが、ボックスにカーソルを合わせると、 2 秒かけて --stop-color のトランジションが aquamarine まで遷移します（linear-gradient(to right, aquamarine, lavenderblush)）。

リファレンス

アットルール

@property
- syntax 記述子
  - + and # 量化子
  - | 結合子
- inherits 記述子
- initial-value 記述子

インターフェイスと API

ガイド

CSS プロパティと値 API の使用: CSS や JavaScript でカスタムプロパティを登録する方法について、未定義値や無効値の扱い方、代替、継承などのヒントを交えて解説しています。
CSS Houdini: CSS Houdini とは何か、その利点について、利用可能な API とそのステータスの一覧とともに説明します。

仕様書

Specification
CSS Properties and Values API Level 1