CSS entwickelt sich mit der Zeit weiter und es werden immer neuere Funktionen hinzugefügt, die es einfacher machen, die am häufigsten verwendeten Funktionen zu implementieren. Heute werden wir eine solche Funktion sehen, die CSS noch leistungsfähiger macht.

Die @property (at-rule) ermöglicht Entwicklern die Definition benutzerdefinierter Eigenschaften. In diesem Beitrag werfen wir anhand einiger praktischer Beispiele einen Blick darauf, was @property ist, warum es nützlich ist und wie man es verwendet.

Was ist die @property At-Rule?

Benutzerdefinierte CSS-Eigenschaften (Variablen) gibt es schon seit einiger Zeit und sie ermöglichen das Speichern und Wiederverwenden von Werten wie Farben, Schriftgrößen oder anderen Stilwerten. Allerdings fehlten ihnen bis vor Kurzem erweiterte Funktionen wie die Definition von Typen und Standardwerten. Dies ist besonders nützlich, wenn wir komplexe Animationen umsetzen möchten (mehr dazu in den kommenden Beiträgen).

Die @property-Regel stellt eine benutzerdefinierte Eigenschaftsregistrierung direkt im Stylesheet dar, ohne dass Js ausgeführt werden müssen.

Grundlegende Syntax

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• Syntax: Definiert den erwarteten Datentyp der Eigenschaft. In diesem Fall handelt es sich um eine Farbe (), es kann sich jedoch um einen beliebigen gültigen CSS-Datentyp wie , oder handeln.
• erbt: Bestimmt, ob der Eigenschaftswert von untergeordneten Elementen geerbt werden soll. Es kann auf true oder false gesetzt werden.
• Anfangswert: Legt einen Standardwert für die Eigenschaft fest, wenn keiner angegeben wird.

Wann ist @property zu verwenden?

• Wenn Sie eine benutzerdefinierte Eigenschaft animieren oder überführen müssen, um ein reibungsloses Verhalten sicherzustellen.
• Um Datentypen (wie Farben, Längen oder Zahlen) zu erzwingen, um Fehler durch ungültige Werte zu vermeiden.
• So legen Sie Standardwerte für benutzerdefinierte Eigenschaften fest, um konsistente Stile beizubehalten, wenn Werte fehlen.
• Steuern Sie die Vererbung benutzerdefinierter Eigenschaften zwischen übergeordneten und untergeordneten Elementen.

Mehr lesen

• MDN-Dokumente @property

Ursprünglicher Beitrag