CSS Properties and Values API

CSS Properties and Values API（CSS Houdini API の傘の一部）を使用すると、開発者は CSS カスタムプロパティを明示的に定義して、プロパティ型のチェック、デフォルト値、および値を継承するまたは継承しないプロパティを許可できます。

インターフェイス

CSS.registerProperty

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

@property

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

例

次の例では、JavaScript で CSS.registerProperty を使用して、CSS カスタムプロパティ --my-color を色とし、デフォルト値を指定し、値を継承できないようにします。

js

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

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

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

ブラウザーの互換性

個々のインターフェイスを参照

関連情報