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:
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@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.
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.
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:
- Ist Houdini bereit?
- Referenz von MDN Houdini
- Intelligentere benutzerdefinierte Properties mit der neuen Houdini API
- Houdini CSSWG-Problemwarteschlange
Foto von Cristian Escobar auf Unsplash.