@property: CSS-Variablen der nächsten Generation jetzt mit Unterstützung für universelle Browser

Una Kravets

Bereiten Sie sich auf ein Upgrade für Preisvergleichsportale vor! Die @property-Regel, eine der APIs von CSS Houdini, wird jetzt vollständig in allen modernen Browsern unterstützt. Diese bahnbrechende Funktion eröffnet neue Möglichkeiten der Steuerung und Flexibilität für benutzerdefinierte CSS-Eigenschaften (auch bekannt als CSS-Variablen), sodass Ihre Stylesheets intelligenter und dynamischer werden.

Die Vorteile von @property

• Semantische Bedeutung:Definieren Sie mit @property einen Typ (Syntax) für Ihre benutzerdefinierten Eigenschaften. So weiß der Browser, welche Art von Daten in Ihrer benutzerdefinierten Property enthalten sind (z. B. Farben, Längen oder Zahlen). So vermeiden Sie unerwartete Ergebnisse und unterstützen neue Möglichkeiten wie das Animieren von Farbverläufen.
• Fallback-Werte:Keine verschwindenden Stile mehr. Verwenden Sie @property, um einen Anfangswert für eine benutzerdefinierte Eigenschaft festzulegen. Wenn später ein ungültiger Wert zugewiesen wird, verwendet der Browser das von Ihnen definierte Fallback.
• Verbesserte Fehlerbehandlung:Die verbesserte Typsicherheit und die Möglichkeit, Fallbacks festzulegen, eröffnen neue Möglichkeiten für Tests und Validierungen direkt in Ihrem Preisvergleichsportal.

Erweiterte benutzerdefinierte Eigenschaften erstellen

So erstellen Sie eine Standard- benutzerdefinierte Eigenschaft erstellen, legen Sie einen Attributnamen mit vorangestelltem -- fest und weisen Sie dieser Eigenschaft einen Wert zu. Der Wert dieser benutzerdefinierten Eigenschaften wird vom Browser als String geparst.

Das folgende Beispiel zeigt, wie eine (stringbasierte) benutzerdefinierte Standardeigenschaft initialisiert wird.

:root {
 --myColor: hotpink;
}

Um die Vorteile dieser erweiterten benutzerdefinierten Eigenschaften zu nutzen, einschließlich der Semantik, die über einen String hinausgeht, registrieren Sie Ihre benutzerdefinierte CSS-Eigenschaft bei @property.

In diesem Beispiel wird dasselbe benutzerdefinierte Attribut mit @property initialisiert.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

Die benutzerdefinierte Eigenschaft, die mit @property initialisiert wird, bietet viel mehr Details als nur einen Namen und einen Wert. Sie enthält den Syntaxtyp und legt die Vererbung auf „true“ oder „false“ fest.

Der Vorteil dieses Ansatzes besteht darin, dass Sie bei der Standardeigenschaft erwarten, dass diese Eigenschaft eine Farbe als Wert enthält und diese Farbe an anderer Stelle im Stylesheet verwenden. Wenn jemand diese Eigenschaft aktualisiert, sodass sie eine Zahl als Wert hat, würde die Verwendung der Eigenschaft an anderer Stelle fehlschlagen. Mit @property wird eine Fallback-Farbe definiert sowie eine syntax, die angibt, dass diese Eigenschaft einen Farbwert enthalten muss. Wird ein Wert verwendet, bei dem es sich nicht um eine Farbe handelt, wird stattdessen das Fallback verwendet.

Demo: Hintergrund mit blinkendem Farbverlauf

Eine der praktischen Anwendungen von @property ist die flüssige Animation von Eigenschaften, die zuvor nicht übergangsbar waren, wie Farbverläufe, die vom Browser als Bilder wahrgenommen werden. Wenn Sie Variablen über @property jedoch eine syntaktische Bedeutung verleihen, können diese in einer Gradientenanweisung verwendet werden. Jetzt beschreiben Sie eine Animation zwischen zwei angegebenen Werten innerhalb des Farbverlaufs, wodurch die Animation aktiviert wird. Hier ein Beispiel: eine Karte mit einer subtilen Hintergrundanimation, die aus zwei radialen Farbverläufen besteht, die die Farbe auf verschiedenen Zeitachsen verändern:

Dies kann erreicht werden, indem Sie Ihre Werte für benutzerdefinierte Eigenschaften als Farben einrichten:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Anschließend können Sie darauf zugreifen, um den ersten Farbverlaufshintergrund zu erstellen:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Außerdem aktualisieren Sie dann die Werte in Keyframes:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

Und animieren Sie sie jeweils:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Fazit

Über CSS registrierte benutzerdefinierte Eigenschaften sind eine sehr leistungsstarke Funktion, mit der die CSS-Sprache erweitert wird, indem CSS-Variablen Bedeutung und Kontext gegeben werden. Da @property jetzt in der Referenz erreicht wird, nimmt die Stärke dieser CSS-Superpower zu.

Weitere Informationen

• MDN-Webdokumente
• @property: CSS-Variablen Superkräfte zuweisen