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 unglaublich nützlich, haben aber Mängel, die die Arbeit mit ihnen erschweren können: Sie können jeden Wert annehmen und werden daher möglicherweise versehentlich durch einen unerwarteten Wert überschrieben. Außerdem übernehmen sie immer die Werte ihres übergeordneten Elements und können nicht migriert werden. 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 Styling und Layout im Web erklären“. Die Sammlung von Houdini-Spezifikationen soll die Leistungsfähigkeit 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. So ist es endlich möglich, getippte CSS-Werte in JavaScript zu verwenden und Polyfills zu erstellen oder neues CSS zu entwickeln, ohne dass die Leistung beeinträchtigt wird. 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. 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 hier --my-color nicht eingegeben wird, weiß das Programm nicht, dass eine URL kein gültiger Farbwert ist. Wenn wir es verwenden, wird auf die Standardwerte zurückgegriffen (schwarz für color, transparent für background). Mit Houdini-Requisiten und ‑Werten können benutzerdefinierte Properties registriert werden, damit der Browser weiß, wie sie sein sollten.

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

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 Property.

syntax: string

So wird die benutzerdefinierte Property geparst. Eine vollständige Liste der möglichen Werte finden Sie in der Spezifikation für 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.

syntax im Detail 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.

  • Wenn + angehängt wird, wird eine durch Leerzeichen getrennte Liste von Werten dieser Syntax akzeptiert. <length>+ ist beispielsweise eine durch Leerzeichen getrennte Liste mit Längen.
  • 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.

Gotchas

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 ein Fehler ausgegeben, dass sie bereits definiert wurde.

Zweitens werden registrierte Properties im Gegensatz zu Standard-Properties nicht beim Parsen validiert. Sie werden erst bei der Berechnung validiert. Das bedeutet, dass ungültige Werte bei der Prüfung der Elementeigenschaften nicht als ungültig angezeigt werden. Wenn eine ungültige Eigenschaft nach einer gültigen Eigenschaft eingefügt wird, wird nicht auf die gültige Eigenschaft zurückgegriffen. Bei einer ungültigen Eigenschaft wird jedoch auf den Standardwert der registrierten Eigenschaft zurückgegriffen.

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. Ohne Registrierung der Property springt der Browser von einer Farbe zur nächsten. Da die Property nicht registriert ist, weiß der Browser nicht, was zwischen einem Wert und dem nächsten zu erwarten ist, und kann daher nicht garantieren, dass die Übergänge reibungslos funktionieren. 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 wurde entwickelt, um Funktionen zu entwickeln, die die „Magie“ von Stil und Layout im Web erklären. Nutzen Sie diese magischen Funktionen also.

Foto von Maik Jonietz auf Unsplash