CSS Properties and Values API

Die CSS-Eigenschaften- und Werte-API — Teil des CSS Houdini API-Frameworks — erlaubt Entwicklern, ihre CSS-Benutzerdefinierten Eigenschaften explizit zu definieren. Dies ermöglicht Typprüfungen für Eigenschaften, Standardwerte sowie Eigenschaften, die ihre Werte erben oder nicht erben.

Schnittstellen

CSS.registerProperty

Definiert, wie ein Browser CSS-Benutzerdefinierte Eigenschaften parsen soll. Diese Schnittstelle wird über CSS.registerProperty in JavaScript aufgerufen.

@property

Definiert, wie ein Browser CSS-Benutzerdefinierte Eigenschaften parsen soll. Diese Schnittstelle wird über die @property-At-Regel in CSS verwendet.

Beispiele

Im Folgenden wird eine Benutzerdefinierte Eigenschaft namens --my-color mit CSS.registerProperty in JavaScript registriert. --my-color nutzt die CSS-Farbsyntax, hat einen Standardwert von #c0ffee und erbt ihren Wert nicht:

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

Die gleiche Registrierung kann in CSS unter Verwendung der @property-At-Regel durchgeführt werden:

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

Spezifikationen

Specification
CSS Properties and Values API Level 1
# the-css-property-rule-interface
CSS Properties and Values API Level 1
# the-registerproperty-function

Browser-Kompatibilität

api.CSSPropertyRule

BCD tables only load in the browser

api.CSS.registerProperty_static

BCD tables only load in the browser

Siehe auch