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 |
ブラウザーの互換性
個々のインターフェイスを参照