@property: CSS-Variablen besondere Möglichkeiten

Una Kravets

CSS Houdini ist ein Oberbegriff für eine Reihe von Low-Level-APIs, die Teile der CSS-Rendering-Engine sichtbar machen und Entwicklern Zugriff auf das CSS-Objektmodell ermöglichen. Dies ist eine große Veränderung für das CSS-Ökosystem, da Entwickler damit dem Browser mitteilen können, wie benutzerdefinierten CSS-Code gelesen und geparst werden soll, ohne darauf warten zu müssen, dass die Browseranbieter integrierte Unterstützung für diese Funktionen bieten. So aufregend!

Eine der interessantesten Neuerungen im CSS-Bereich unter Houdini ist die Properties and Values API.

Mit dieser API werden Ihre benutzerdefinierten CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) optimiert, indem ihnen eine semantische Bedeutung (definiert durch eine Syntax) und sogar Fallback-Werte zugewiesen werden, sodass CSS-Tests möglich sind.

Benutzerdefinierte Houdini-Eigenschaften schreiben

Hier ein Beispiel für die Einstellung einer benutzerdefinierten Property (vergleichbar mit einer CSS-Variablen), diesmal mit Syntax (Typ), Anfangswert (Fallback) und boolescher Vererbung (wird der Wert vom übergeordneten Element übernommen oder nicht?). Derzeit ist das über CSS.registerProperty() in JavaScript möglich. In unterstützten Browsern kannst du aber auch @property verwenden:

Separate JavaScript-Datei (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
In der CSS-Datei enthalten (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Sie können jetzt wie bei jeder anderen benutzerdefinierten CSS-Eigenschaft über var(--colorPrimary) auf --colorPrimary zugreifen. Der Unterschied besteht jedoch darin, dass --colorPrimary nicht nur als String gelesen wird. Es enthält Daten!

Fallback-Werte

Wie bei jeder anderen benutzerdefinierten Property können Sie Werte abrufen (mit var) oder festlegen (schreiben/überschreiben). Wenn Sie bei benutzerdefinierten Houdini-Properties beim Überschreiben jedoch einen Falsey-Wert festlegen, sendet das CSS-Rendering-Engine den ursprünglichen Wert (den Fallback-Wert), anstatt die Zeile zu ignorieren.

Sehen Sie sich das Beispiel unten an. Die Variable --colorPrimary hat den Wert initial-value = magenta. Der Entwickler hat jedoch den ungültigen Wert „23“ angegeben. Ohne @property würde der CSS-Parser den ungültigen Code ignorieren. Jetzt greift der Parser auf magenta zurück. So sind echte Fallbacks und Tests in CSS möglich. Sehr gut!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Syntax

Mit der Syntaxfunktion können Sie jetzt semantisches CSS schreiben, indem Sie einen Typ angeben. Zu den derzeit zulässigen Typen gehören:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (ein benutzerdefinierter Bezeichner-String)

Wenn Sie eine Syntax festlegen, kann der Browser benutzerdefinierte Properties typüberprüfen. Das hat viele Vorteile.

Zur Veranschaulichung zeige ich Ihnen, wie Sie einen Farbverlauf animieren. Derzeit gibt es keine Möglichkeit, zwischen Farbverlaufswerten stufenlos zu animieren (oder zu interpolieren), da jede Farbverlaufsdeklaration als String geparst wird.

Mit einer benutzerdefinierten Property mit der Syntax „number“ zeigt der Farbverlauf auf der linken Seite einen fließenden Übergang zwischen den Haltestellenwerten. Der Farbverlauf auf der rechten Seite verwendet eine Standard-benutzerdefinierte Eigenschaft (keine Syntax definiert) und zeigt einen abrupten Übergang.

In diesem Beispiel wird der Prozentsatz des Farbverlaufsstopps über eine Hover-Interaktion von einem Startwert von 40% auf einen Endwert von 100% animiert. Die Farbe des oberen Farbverlaufs sollte nun flüssiger nach unten übergehen.

Der Browser auf der linken Seite unterstützt die Houdini Properties and Values API und ermöglicht so einen reibungslosen Übergang mit dem Farbverlaufsstopp. Beim Browser auf der rechten Seite ist das nicht der Fall. Der nicht unterstützte Browser kann diese Änderung nur als String von Punkt A nach Punkt B verstehen. Es gibt keine Möglichkeit, die Werte zu interpolieren, und daher ist der Übergang nicht fließend.

Wenn Sie jedoch beim Erstellen benutzerdefinierter Properties den Syntaxtyp angeben und dann diese benutzerdefinierten Properties verwenden, um die Animation zu aktivieren, wird der Übergang angezeigt. So können Sie die benutzerdefinierte Property --gradPoint instanziieren:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Wenn die Animation dann ansteht, können Sie den Wert von 40% in 100% ändern:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Dadurch wird jetzt ein glatter Farbverlauf ermöglicht.

Reibungsloser Übergang von Farbverlaufrändern. Demo auf Glitch ansehen

Fazit

Die @property-Regel macht eine spannende Technologie noch zugänglicher, da Sie damit semantisch sinnvolles CSS innerhalb von CSS selbst schreiben können. Weitere Informationen zu CSS Houdini und der Properties and Values API finden Sie in den folgenden Ressourcen:

Foto von Cristian Escobar auf Unsplash.