CSS プロパティと値 API

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