CSS プロパティと値 API

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS プロパティと値 API（CSS Houdini API の傘下）により、 CSS カスタムプロパティの登録において、開発者は明示的に、プロパティの型チェック、既定値、プロパティの値を継承の有無の登録を行うことができます。

CSS.registerProperty: ブラウザーが CSS カスタムプロパティを構文解析する方法を定義します。 JavaScript の CSS.registerProperty を介してこのインターフェイスにアクセスします。
@property: ブラウザーが CSS カスタムプロパティを構文解析する方法を定義します。 CSS の @property アットルールを介してこのインターフェイスにアクセスします。

次の例では、 CSS カスタムプロパティ として --my-prop を CSS.registerProperty によって登録します。 --my-prop は CSS 色構文を使用し、既定値として #c0ffee があり、値を継承しないようにします。

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

CSS では次の @property アットルールを使用して、同じ登録を行うことができます。

css

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Specification
CSS Properties and Values API Level 1 # the-css-property-rule-interface
CSS Properties and Values API Level 1 # the-registerproperty-function