Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini

Übergänge und Datenschutz in CSS

Sam Richard

Mit benutzerdefinierten CSS-Properties, auch CSS-Variablen genannt, können Sie eigene Properties in CSS definieren und ihre Werte in Ihrem gesamten CSS verwenden. Sie sind zwar heute sehr nützlich, haben jedoch Mängel, die die Arbeit erschweren: Sie können jeden Wert annehmen, damit sie versehentlich mit etwas Unerwartetem überschrieben werden, sie übernehmen immer ihre Werte vom übergeordneten Element und Sie können sie nicht umstellen. Mit der CSS Properties and Values API Level 1 von Houdini, die jetzt in Chrome 78 verfügbar ist, werden diese Mängel überwunden, sodass benutzerdefinierte CSS-Properties unglaublich leistungsfähig sind.

Was ist Houdini?

Bevor wir uns mit der neuen API befassen, sprechen wir kurz über Houdini. Die CSS-TAG Houdini Task Force, besser bekannt als CSS Houdini oder einfach Houdini, hat das Ziel, „Funktionen zu entwickeln, die die ‚Magie‘ von Stil und Layout im Web erklären“. Die Sammlung von Houdini-Spezifikationen soll die Leistung der Rendering-Engine des Browsers freisetzen und so sowohl einen besseren Einblick in unsere Stile als auch die Möglichkeit zur Erweiterung unserer Rendering-Engine bieten. Damit sind nun endlich typisierte CSS-Werte in JavaScript und Polyfilling oder die Erfindung neuer CSS ohne Leistungseinbußen möglich. Houdini hat das Potenzial, die Kreativität im Web zu steigern.

CSS-Properties und -Werte – API-Ebene 1

Mit der CSS Properties and Values API Level 1 (Houdini Props and Vals) können wir unsere benutzerdefinierten Properties strukturieren. So sieht die aktuelle Situation bei der Verwendung benutzerdefinierter Properties aus:

.thing {
  --my-color: green;
}

Da benutzerdefinierte Properties keine Typen haben, können sie auf unerwartete Weise überschrieben werden. Ein Beispiel: Was passiert, wenn du --my-color mit einer URL definierst?

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Da hier --my-color nicht eingegeben wird, weiß das Programm nicht, dass eine URL kein gültiger Farbwert ist. Wenn wir es verwenden, wird es auf die Standardwerte zurückgesetzt (schwarz für color, transparent für background). Mit Houdini-Props und Vals können benutzerdefinierte Eigenschaften registriert werden, damit der Browser weiß, was sie sein sollen.

Jetzt ist das benutzerdefinierte Attribut --my-color als Farbe registriert. So wird dem Browser mitgeteilt, welche Arten von Werten zulässig sind und wie er diese Property eingeben und behandeln kann.

Aufbau einer registrierten Property

Die Registrierung einer Property sieht so aus:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Folgende Optionen werden unterstützt:

name: string

Der Name der benutzerdefinierten Eigenschaft.

syntax: string

So wird die benutzerdefinierte Property geparst. Eine vollständige Liste der möglichen Werte finden Sie in der Spezifikation CSS-Werte und -Einheiten. Die Standardeinstellung ist *.

inherits: boolean

Gibt an, ob der Wert des übergeordneten Elements übernommen wird. Die Standardeinstellung ist true.

initialValue: string

Anfangswert der benutzerdefinierten Property.

Wirf einen genaueren Blick auf syntax. Es gibt eine Reihe von gültigen Optionen, von Zahlen über Farben bis hin zum Typ <custom-ident>. Diese Syntaxen können auch mithilfe der folgenden Werte geändert werden.

  • Wenn + angehängt wird, wird eine durch Leerzeichen getrennte Liste von Werten dieser Syntax akzeptiert. So wäre z. B. <length>+ eine durch Leerzeichen getrennte Liste von Längenangaben.
  • Wenn # angehängt wird, wird eine durch Kommas getrennte Liste von Werten dieser Syntax akzeptiert. <color># ist beispielsweise eine durch Kommas getrennte Liste von Farben.
  • Wenn Sie | zwischen Syntaxen oder Bezeichnern einfügen, bedeutet das, dass alle angegebenen Optionen gültig sind. Für <color># | <url> | magic ist beispielsweise entweder eine durch Kommas getrennte Liste von Farben, eine URL oder das Wort magic zulässig.

Erwischt

Bei Houdini-Requisiten und -Werten gibt es zwei Fallstricke. Erstens: Nach der Definition kann eine vorhandene registrierte Property nicht mehr aktualisiert werden. Wenn Sie versuchen, eine Property noch einmal zu registrieren, wird eine Fehlermeldung ausgegeben, dass sie bereits definiert wurde.

Zweitens werden registrierte Properties im Gegensatz zu Standard-Properties nicht beim Parsen validiert. Stattdessen werden sie bei ihrer Berechnung validiert. Das bedeutet, dass ungültige Werte bei der Überprüfung der Eigenschaften des Elements nicht als ungültig angezeigt werden und dass eine ungültige Eigenschaft nach einer gültigen Property nicht auf die gültige Property zurückgreift. Eine ungültige Eigenschaft greift jedoch auf den Standardwert der registrierten Property zurück.

Benutzerdefinierte Eigenschaften animieren

Eine registrierte benutzerdefinierte Property bietet neben der Typprüfung noch einen weiteren Vorteil: Sie lässt sich animieren. Ein einfaches Beispiel für eine Animation sieht so aus:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Wenn du den Mauszeiger auf die Schaltfläche bewegst, ändert sie ihre Farbe von Rot zu Grün. Wenn die Eigenschaft nicht registriert wird, springt sie von einer Farbe zur anderen. Ohne Registrierung weiß der Browser nicht, was zwischen den Werten zu erwarten ist, und kann daher nicht garantieren, dass der Wechsel zwischen den Werten möglich ist. Dieses Beispiel kann jedoch noch weiter ausgebaut werden, um CSS-Gradienten zu animieren. Das folgende CSS kann mit derselben registrierten Property geschrieben werden:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Dadurch wird die benutzerdefinierte Eigenschaft animiert, die Teil des linear-gradient ist, und damit auch der lineare Farbverlauf. Im Glitch unten können Sie sich den vollständigen Code ansehen und selbst damit herumspielen.

Fazit

Houdini ist auf dem Weg in Browser und damit ganz neue Möglichkeiten, mit CSS zu arbeiten und es zu erweitern. Mit der bereits eingeführten Paint API und jetzt auch mit benutzerdefinierten Props und Vals wird unsere Creative-Toolbox erweitert. So können wir typisierte CSS-Eigenschaften definieren und damit neue und spannende Designs erstellen und animieren. Weitere Neuerungen sind in Planung. In der Houdini-Problemliste können Sie Feedback geben und sich über die nächsten Schritte für Houdini informieren. Houdini entwickelt Funktionen, die die „Magie“ von Stilen und Layouts im Web erklären. Machen Sie sich also auf den Weg und nutzen Sie diese magischen Funktionen.

Foto von Maik Jonietz auf Unsplash