Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini

Übergänge und Datenschutz in CSS

Sam Richard

Mit benutzerdefinierten CSS-Eigenschaften, auch als CSS-Variablen bezeichnet, können Sie eigene Eigenschaften in CSS definieren und deren Werte im gesamten CSS verwenden. Sie sind zwar heute unglaublich nützlich, haben aber auch Nachteile, die die Arbeit mit ihnen erschweren können: Sie können jeden Wert annehmen, sodass sie versehentlich mit etwas Unerwartetem überschrieben werden können, sie übernehmen ihre Werte immer von ihrem übergeordneten Element und sie können nicht umgewandelt werden. Mit der CSS Properties and Values API Level 1 von Houdini, die jetzt in Chrome 78 verfügbar ist, werden diese Mängel behoben und benutzerdefinierte CSS-Eigenschaften werden unglaublich leistungsstark.

Was ist Houdini?

Bevor wir über die neue API sprechen, möchte ich kurz auf Houdini eingehen. Die CSS-TAG Houdini Task Force, besser bekannt als CSS Houdini oder einfach Houdini, wurde gegründet, um „Funktionen zu entwickeln, die die ‚Magie‘ von Styling und Layout im Web erklären“. Die Sammlung von Houdini-Spezifikationen soll die Leistungsfähigkeit der Rendering-Engine des Browsers erschließen, um sowohl tiefere Einblicke in unsere Stile zu ermöglichen als auch die Rendering-Engine zu erweitern. Damit sind typisierte CSS-Werte in JavaScript und Polyfilling oder das Erfinden neuer CSS-Werte ohne Leistungseinbußen endlich möglich. Houdini hat das Potenzial, die Kreativität im Web zu steigern.

CSS Properties and Values API Level 1

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

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

Da benutzerdefinierte Eigenschaften keine Typen haben, können sie auf unerwartete Weise überschrieben werden. Sehen wir uns beispielsweise an, was passiert, wenn Sie --my-color mit einer URL definieren.

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

Da --my-color nicht typisiert ist, weiß es nicht, dass eine URL kein gültiger Farbwert ist. Wenn wir sie verwenden, werden die Standardwerte verwendet (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 sollten.

Die benutzerdefinierte Eigenschaft --my-color ist jetzt als Farbe registriert. So weiß der Browser, welche Arten von Werten zulässig sind und wie er diese Property eingeben und behandeln kann.

Aufbau eines registrierten Attributs

So registrieren Sie eine Property:

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

Wie die benutzerdefinierte Eigenschaft geparst werden soll. Eine vollständige Liste der möglichen Werte finden Sie in der Spezifikation CSS Values and Units. Die Standardeinstellung ist *.

inherits: boolean

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

initialValue: string

Anfangswert der benutzerdefinierten Eigenschaft.

syntax wird genauer geprüft. Es gibt eine Reihe von gültigen Optionen, von Zahlen über Farben bis hin zu <custom-ident>-Typen. Diese Syntaxen können auch mit den folgenden Werten geändert werden:

  • Das Anhängen von + bedeutet, dass eine durch Leerzeichen getrennte Liste von Werten dieser Syntax akzeptiert wird. <length>+ wäre beispielsweise eine durch Leerzeichen getrennte Liste von Längen.
  • Das Anhängen von # bedeutet, dass eine durch Kommas getrennte Liste von Werten dieser Syntax akzeptiert wird. <color># wäre beispielsweise eine durch Kommas getrennte Liste von Farben.
  • Wenn Sie | zwischen Syntaxen oder Kennungen einfügen, bedeutet dies, dass alle angegebenen Optionen gültig sind. <color># | <url> | magic würde beispielsweise eine durch Kommas getrennte Liste von Farben, eine URL oder das Wort magic zulassen.

Gotchas

Bei Houdini-Eigenschaften und -Werten gibt es zwei Fallstricke. Erstens: Ein einmal definiertes registriertes Attribut kann nicht mehr aktualisiert werden. Wenn Sie versuchen, ein Attribut noch einmal zu registrieren, wird ein Fehler ausgegeben, der darauf hinweist, dass es bereits definiert wurde.

Zweitens werden registrierte Properties im Gegensatz zu Standard-Properties beim Parsen nicht validiert. Stattdessen werden sie validiert, wenn sie berechnet werden. Das bedeutet, dass ungültige Werte bei der Prüfung der Elementeigenschaften nicht als ungültig angezeigt werden und dass nach einem gültigen Attribut kein ungültiges Attribut verwendet wird. Ein ungültiges Attribut wird jedoch auf den Standardwert des registrierten Attributs zurückgesetzt.

Benutzerdefinierte Eigenschaften animieren

Eine registrierte benutzerdefinierte Eigenschaft bietet neben der Typprüfung einen weiteren Vorteil: Sie kann animiert werden. 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, wechselt die Farbe von Rot zu Grün. Ohne die Registrierung der Property springt sie von einer Farbe zur anderen, da der Browser ohne Registrierung nicht weiß, was zwischen einem Wert und dem nächsten zu erwarten ist, und daher nicht garantieren kann, dass sie umgewandelt werden können. Dieses Beispiel lässt sich aber noch einen Schritt weiterführen, um CSS-Verläufe 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 somit auch der lineare Farbverlauf. Im Codepen unten können Sie sich den vollständigen Code in Aktion ansehen und selbst damit experimentieren.

Fazit

Houdini ist auf dem Weg zu Browsern und bietet völlig neue Möglichkeiten, mit CSS zu arbeiten und es zu erweitern. Mit der bereits veröffentlichten Paint API und jetzt auch mit benutzerdefinierten Eigenschaften und Werten wird unsere Creative-Toolbox erweitert. So können wir typisierte CSS-Eigenschaften definieren und damit neue und interessante Designs erstellen und animieren. In der Houdini-Problemwarteschlange finden Sie weitere Informationen. Dort können Sie auch Feedback geben und sehen, was als Nächstes für Houdini geplant ist. Houdini wurde entwickelt, um Funktionen zu entwickeln, die die „Magie“ von Styling und Layout im Web erklären. Also nutzt diese magischen Funktionen.