@property: CSS-Variablen besondere Möglichkeiten

Una Kravets

CSS Houdini ist ein Sammelbegriff für eine Reihe von Low-Level-APIs, die Teile der CSS-Rendering-Engine verfügbar machen und Entwicklern Zugriff auf das CSS-Objektmodell ermöglichen. Das ist eine große Änderung für das CSS-Ökosystem, da Entwickler dem Browser mitteilen können, wie benutzerdefiniertes CSS gelesen und geparst werden soll, ohne darauf warten zu müssen, dass Browseranbieter integrierte Unterstützung für diese Funktionen bereitstellen. Wie aufregend!

Eine der spannendsten Ergänzungen von CSS im Rahmen von Houdini ist die Properties and Values API.

Diese API erweitert Ihre benutzerdefinierten CSS-Eigenschaften (auch als CSS-Variablen bezeichnet) um semantische Bedeutung (definiert durch eine Syntax) und sogar um Fallback-Werte, wodurch CSS-Tests möglich werden.

Benutzerdefinierte Houdini-Eigenschaften schreiben

Hier sehen Sie ein Beispiel für das Festlegen einer benutzerdefinierten Property (ähnlich einer CSS-Variablen), aber jetzt mit einer Syntax (Typ), einem Anfangswert (Fallback) und einem booleschen Wert für die Vererbung (wird der Wert vom übergeordneten Element übernommen oder nicht?). Derzeit ist dies über CSS.registerProperty() in JavaScript möglich. In unterstützten Browsern können Sie jedoch @property verwenden:

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

Sie können jetzt über var(--colorPrimary) wie auf jede andere benutzerdefinierte CSS-Eigenschaft 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 jedoch bei benutzerdefinierten Houdini-Properties beim Überschreiben einen „falsy“-Wert festlegen, sendet die CSS-Rendering-Engine den ursprünglichen Wert (den Fallback-Wert), anstatt die Zeile zu ignorieren.

Dazu ein Beispiel: Die Variable --colorPrimary hat einen initial-value von magenta. Der Entwickler hat jedoch den ungültigen Wert „23“ angegeben. Ohne @property würde der CSS-Parser den ungültigen Code ignorieren. Der Parser greift jetzt auf magenta zurück. So sind echte Fallbacks und Tests in CSS möglich. Toll!

.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. Die derzeit zulässigen Typen sind:

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

Wenn Sie eine Syntax festlegen, kann der Browser benutzerdefinierte Eigenschaften auf Typfehler prüfen. Das hat viele Vorteile.

Um das zu veranschaulichen, zeige ich Ihnen, wie Sie einen Farbverlauf animieren. Derzeit ist es nicht möglich, Gradientenwerte flüssig zu animieren (oder zu interpolieren), da jede Gradientendeklaration als String geparst wird.

Bei Verwendung eines benutzerdefinierten Attributs mit der Syntax „number“ (Zahl) ist auf dem Gradienten links ein sanfter Übergang zwischen den Stoppwerten zu sehen. Der Farbverlauf auf der rechten Seite verwendet eine benutzerdefinierte Standardeigenschaft (keine definierte Syntax) und zeigt einen abrupten Übergang.

In diesem Beispiel wird der Prozentsatz für den Farbverlauf-Stopp über eine Hover-Interaktion von einem Startwert von 40% zu einem Endwert von 100% animiert. Die obere Farbe des Verlaufs sollte nach unten hin allmählich in die nächste Farbe übergehen.

Der Browser auf der linken Seite unterstützt die Houdini Properties and Values API, die einen reibungslosen Übergang zwischen Gradientenstopps ermöglicht. Beim Browser auf der rechten Seite ist das nicht der Fall. Der nicht unterstützende Browser kann diese Änderung nur als String verstehen, der von Punkt A zu Punkt B verläuft. Die Werte können nicht interpoliert werden, daher ist kein reibungsloser Übergang zu sehen.

Wenn Sie jedoch den Syntax-Typ beim Schreiben benutzerdefinierter Eigenschaften deklarieren und diese benutzerdefinierten Eigenschaften dann verwenden, um die Animation zu aktivieren, wird der Übergang angezeigt. Sie können die benutzerdefinierte Eigenschaft --gradPoint so instanziieren:

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

Wenn Sie die Animation starten möchten, können Sie den Wert von 40% auf 100% aktualisieren:

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

Dadurch wird jetzt ein reibungsloser Übergang zwischen den Farben ermöglicht.

Weiche Übergänge zwischen den Farbverlaufsgrenzen. Demo auf CodePen ansehen

Fazit

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

Foto von Cristian Escobar auf Unsplash.