CSS プロパティと値 API

インターフェイス

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 アットルールを使用して、同じ登録を行うことができます。

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

仕様書

ブラウザーの互換性

api.CSSPropertyRule

api.CSS.registerProperty_static

関連情報

• CSS プロパティと値 API の使用
• CSS 描画 API
• CSS 型付きオブジェクトモデル
• CSS Houdini