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

Veröffentlicht: 12. Juli 2024

Bereit für ein CSS-Upgrade? Die Regel @property, die zu den CSS Houdini APIs gehört, wird jetzt von allen modernen Browsern vollständig unterstützt. Diese wegweisende Funktion bietet neue Möglichkeiten zur Steuerung und Flexibilität von benutzerdefinierten CSS-Properties (auch als CSS-Variablen bezeichnet) und macht Ihre Stylesheets intelligenter und dynamischer.

Vorteile von @property

  • Semantische Bedeutung:Mit @property können Sie einen Typ (Syntax) für Ihre benutzerdefinierten Properties definieren. So wird dem Browser mitgeteilt, welche Art von Daten Ihre benutzerdefinierte Property enthält (z. B. Farben, Längen oder Zahlen). Dadurch werden unerwartete Ergebnisse verhindert und neue Möglichkeiten wie die Animation von Farbverläufen unterstützt.
  • Fallback-Werte:Stile verschwinden nicht mehr. Mit @property können Sie einen Anfangswert für eine benutzerdefinierte Property festlegen. Wenn später ein ungültiger Wert zugewiesen wird, verwendet der Browser Ihren definierten Fallback.
  • Verbesserte Fehlerbehandlung:Die erweiterte Typsicherheit und die Möglichkeit, Fallbacks festzulegen, eröffnen neue Möglichkeiten für Tests und Validierungen direkt in Ihrem CSS.

Erweiterte benutzerdefinierte Properties erstellen

Wenn Sie eine „Standard“-benutzerdefinierte Property erstellen möchten, geben Sie einen Property-Namen mit einem vorangestellten -- und einen Wert für diese Property an. Der Wert dieser benutzerdefinierten Properties wird vom Browser als String geparst.

Das folgende Beispiel zeigt, wie eine standardmäßige (stringsbasierte) benutzerdefinierte Property initialisiert wird.

:root {
 --myColor: hotpink;
}

Wenn Sie die Vorteile dieser „erweiterten benutzerdefinierten Properties“ nutzen möchten, einschließlich einer Semantik, die über einen String hinausgeht, registrieren Sie Ihre benutzerdefinierte CSS-Property bei @property.

In diesem Beispiel wird dieselbe benutzerdefinierte Property mit @property initialisiert.

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

Die mit @property initialisierte benutzerdefinierte Property enthält viel mehr Details als nur einen Namen und einen Wert. Sie enthält den Syntaxtyp und legt die Vererbung auf „wahr“ oder „falsch“ fest.

Der Vorteil dieses Ansatzes besteht darin, dass Sie bei der Standardeigenschaft davon ausgehen, dass diese Eigenschaft eine Farbe als Wert enthält, die Sie an anderer Stelle im Stylesheet verwenden. Wenn jemand diese Property so aktualisiert, dass sie eine Zahl als Wert hat, funktioniert die Verwendung der Property an anderer Stelle nicht. Mit @property wird eine Fallbackfarbe definiert, zusammen mit einem syntax, das angibt, dass diese Property einen Farbwert enthalten muss. Wenn ein nicht farblicher Wert verwendet wird, wird stattdessen der Fallback verwendet.

Demo: Blinkender Farbverlauf im Hintergrund

Eine der praktischen Anwendungen von @property ist die flüssige Animation von Eigenschaften, die zuvor nicht übergangsweise geändert werden konnten, z. B. Farbverläufe, die vom Browser als Bilder wahrgenommen werden. Wenn Sie Variablen jedoch über @property eine syntaktische Bedeutung geben, können sie in einer Gradientenanweisung verwendet werden. Jetzt beschreiben Sie eine Animation zwischen zwei deklarierten Werten innerhalb des Farbverlaufs und aktivieren die Animation. Sehen wir uns das folgende Beispiel an: Eine Karte mit einer dezenten Hintergrundanimation, die aus zwei radialen Farbverläufen besteht, die die Farbe auf verschiedenen Zeitachsen ändern:

Mit @property Farben in einem Hintergrundverlauf animieren

Dazu können Sie die Werte Ihrer benutzerdefinierten Property 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 greifen Sie darauf zu, 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 aktualisierst du die Werte in den Keyframes:

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

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

und animieren Sie sie:

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

Fazit

Registrierte benutzerdefinierte CSS-Eigenschaften sind eine sehr leistungsstarke Funktion, die die CSS-Sprache erweitert, indem CSS-Variablen Bedeutung und Kontext gegeben werden. Jetzt, da @property in der Baseline landet, wird diese CSS-Superkraft immer stärker.

Weitere Informationen