CSS/@-Regeln/@property

Die @property-Regel ist Teil der CSS Houdini API und erlaubt Entwicklern ihre eigenen custom properties zu definieren, und dabei Syntaxregeln festzulegen, die Typabfrage, Defaultwerte und Vererbung bestimmt.

Details: caniuse.com

Beispiel

@property --head-fg {
   syntax: "<color>";
   inherits: true;
   initialValue: white;
}
@property --head-bg {
   syntax: "<color>";
   inherits: true;
   initialValue: #c32e04;
}

Mithilfe der @property-Regel werden zwei Custom Propertys und die dazugehörigen Syntaxregeln festgelegt, welchen sie zu folgen haben.

Damit legen wir fest, dass diese beiden Eigenschaften genau eine Farbe erwarten, dass ihr Wert an Kind-Elemente vererbt wird und welcher Wert verwendet werden soll, wenn das Property nicht explizit gesetzt wurde.

Siehe auch

• JavaScript/CSS
• SELF-Blog: Houdini - entfesseltes CSS. Teil 1: Eigenschaften und Werte von Rolf Borchmann, 07.09.2021

Weblinks

• drafts.css-houdini.org: 3. The @property Rule (CSS Properties and Values API Level 1 (CSS Properties and Values API 1))
• css-tricks: Exploring @property and its Animating Powers
• web.dev: @property: giving superpowers to CSS variables Una Kravetz