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.

Browserunterstützung
caniuse.com

In einer @property-Regel müssen genau drei Eigenschaften gesetzt werden:

syntax

Die Beschreibung des Wertetyps, den das custom property akzeptieren soll.

inherits

Legt fest, ob dieses Custom Property vererbt wird oder nicht

initial-value

Gibt an, welchen Wert das Custom Property haben soll, wenn es verwendet wird, ohne dass ihm ein Wert zugewiesen wurde oder dass der var()-Funktion ein Argument für einen Defaultwert übergeben wurde.

Die CSS-Syntaxbeschreibung besteht aus einer oder mehreren Syntaxkomponenten. Gibt man mehrere Komponenten an, müssen sie durch ein | voneinander getrennt werden. Das entspricht der Syntaxschreibweise in der CSS Spezifikation und bedeutet, dass die eine oder die andere Syntaxkomponente verwendet werden kann.

Eine Syntaxkomponente wiederum besteht aus einem Komponentennamen, auf den ein Multiplikator folgen kann.

Der Komponentenname ist - der Name eines CSS Datentyps, der in spitze Klammern gesetzt sein muss. Beispiel: <number> - ein selbstgewähltes Schlüsselwort (das den CSS Regeln für Schlüsselwörter entsprechen muss)

Als Multiplikator können Sie - ohne Leerstelle - dem Komponentennamen ein + oder # anfügen. Beide Multiplikatoren geben an, dass diese Komponente auch mehrfach aufgeführt werden darf. Der Unterschied ist, dass + eine durch Leerzeichen getrennte Werteliste beschreibt und # zusätzlich ein Komma zwischen den Werten verlangt.

Beispiele für Syntaxangaben

Syntax	Mögliche Werte
"<string>"	"Ein Text"
"<length> | auto"	17px 5em auto
"<length-percentage># | verteilt"	17px 5em, 17%, 3px verteilt

Sie können die folgenden CSS Datentypen verwenden:

<length>

Eine Längenangabe

<integer>

Ein ganzzahliger Wert

<number>

Ein Zahlenwert mit oder ohne Nachkommastellen

<percentage>

Eine Prozentangabe

<length-percentage>

Eine gültige Längen- oder Prozentangabe. Dieser Typ ist vor allem dann wichtig, wenn eine Liste von <length-percentage>-Angaben erstellt werden soll

<color>

Ein Farbwert

<url>

Eine URL, dargestellt mit der url()-Funktion

<image>

Ein Bildwert. Dies ist entweder eine URL oder ein CSS-Farbverlauf.

<angle>

Ein Winkel. Das ist eine Zahl mit der Einheit deg, rad, grad oder turn.

<time>

Eine Zeitangabe. Das ist eine Zahl mit der Einheit s oder ms.

<resolution>

Eine Auflösung. Dies ist eine Zahl mit einer der Einheiten dpi, dpcm oder dppx bzw. x.

<transform-function>

Eine Transform-Funktion (z.B. translate() oder rotate())

<transform-list>

Eine Liste von Transform-Funktionen. Entspricht <transform-funktion>+. Die Anwendung eines Multiplikators auf <transform-list> ist nicht zulässig!

<custom-ident>

Ein beliebiger gültiger CSS-Name

Ein beliebiger CSS-Name

Dieser Name

Die Liste von CSS Datentypen tragen wir noch nach, zur Zeit finden Sie sie in der W3C-Spezifikation.

asdsakd

@property --head-fg {
   syntax: "<color>";
   inherits: true;
   initial-value: white;
}
@property --head-bg {
   syntax: "<color>";
   inherits: true;
   initial-value: #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

• CSSOM und Typed OM#CSS-Objekt
• 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
• Typed CSS variables using @property (Temani Afif)