CSS プロパティと値 API

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

インターフェイス

CSS.registerProperty

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

@property

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

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

js
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

ブラウザーの互換性

api.CSSPropertyRule

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSPropertyRule
inherits
initialValue
name
syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.CSS.registerProperty_static

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
registerProperty() static method

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報