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 があり、値を継承しないようにします。
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 |