Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini

Umstellungen und Datenschutz in Preisvergleichsportalen

[Vorname 1]

Mit benutzerdefinierten CSS-Eigenschaften, auch CSS-Variablen genannt, können Sie Ihre eigenen Eigenschaften in CSS definieren und deren Werte in Ihrem gesamten CSS verwenden. Sie sind heute zwar unglaublich nützlich, haben aber auch Nachteile, die ihre Arbeit erschweren: Sie können jeden Wert annehmen, sodass er versehentlich mit etwas Unerwartetem überschrieben wird. Sie übernehmen immer die Werte des übergeordneten Elements und lassen sich nicht übertragen. Mit CSS Properties and Values API Level 1 von Houdini, das jetzt in Chrome 78 verfügbar ist, werden diese Schwachstellen vollständig übergangen. Das macht benutzerdefinierte CSS-Attribute unglaublich leistungsstark.

Was ist Houdini?

Bevor wir uns der neuen API zuwenden, wollen wir kurz über Houdini sprechen. Die CSS-TAG Houdini Task Force, besser bekannt als CSS Houdini oder einfach Houdini, entwickelt Funktionen, die die „Magie“ der Gestaltung und des Layouts im Web erklären. Die Sammlung der Houdini-Spezifikationen dient dazu, das volle Potenzial des Rendering-Moduls des Browsers auszuschöpfen und Ihnen damit einen tieferen Einblick in unsere Stile zu geben und das Rendering-Modul zu erweitern. So werden nun endlich typisierte CSS-Werte in JavaScript und Polyfilling oder das Erfinden neuer CSS ohne Leistungseinbußen möglich. Houdini hat das Potenzial, die Kreativität im Web zu überwinden.

CSS Properties and Values API-Level 1

Mit der CSS Properties and Values API Level 1 (Houdini-Props und -Vals) können wir unseren benutzerdefinierten Attributen Struktur verleihen. Bei der Verwendung benutzerdefinierter Attribute ist dies derzeit so:

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

Da benutzerdefinierte Eigenschaften keine Typen enthalten, können sie auf unerwartete Weise überschrieben werden. Überlegen Sie beispielsweise, was passiert, wenn Sie --my-color mit einer URL definieren.

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

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

Jetzt wird die benutzerdefinierte Eigenschaft --my-color als Farbe registriert. Dadurch wird dem Browser mitgeteilt, welche Arten von Werten zulässig sind und wie dieses Attribut eingegeben und verarbeitet werden kann.

Anatomie einer registrierten Eigenschaft

Die Registrierung einer Eigenschaft 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

Parsen der benutzerdefinierten Eigenschaft 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

Ursprünglicher Wert der benutzerdefinierten Eigenschaft

syntax im Detail. Es gibt eine Reihe von gültigen Optionen, darunter Zahlen, Farben und <custom-ident>-Typen. Diese Syntaxen können auch mithilfe der folgenden Werte geändert werden:

  • Das Anhängen von + bedeutet, dass eine durch Leerzeichen getrennte Liste von Werten dieser Syntax akzeptiert wird. Beispiel: <length>+ wäre 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. Beispiel: <color># wäre eine durch Kommas getrennte Liste von Farben.
  • Wenn zwischen Syntaxen oder Kennungen | eingefügt wird, bedeutet dies, dass alle bereitgestellten Optionen gültig sind. Beispiel: Für <color># | <url> | magic ist entweder eine durch Kommas getrennte Liste von Farben, eine URL oder das Wort magic zulässig.

Alles klar

Es gibt zwei Trickshots mit Houdini-Requisiten und Vals. Erstens gibt es nach der Definition keine Möglichkeit, eine vorhandene registrierte Eigenschaft zu aktualisieren. Wenn Sie versuchen, eine Eigenschaft noch einmal zu registrieren, wird ein Fehler ausgegeben, der besagt, dass sie bereits definiert wurde.

Zweitens werden registrierte Eigenschaften im Gegensatz zu Standardeigenschaften beim Parsen nicht validiert. Stattdessen werden sie bei der Berechnung validiert. Das bedeutet, dass ungültige Werte bei der Überprüfung der Eigenschaften des Elements nicht als ungültig erscheinen und eine ungültige Eigenschaft nach einer gültigen nicht auf die gültige zurückgreift. Eine ungültige Eigenschaft wird jedoch auf die Standardeinstellung der registrierten Eigenschaft zurückgesetzt.

Benutzerdefinierte Eigenschaften animieren

Registrierte benutzerdefinierte Eigenschaften bieten über die Typprüfung hinaus einen unterhaltsamen Bonus: die Möglichkeit, sie zu animieren. Ein Beispiel für eine einfache 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 Sie mit der Maus auf die Schaltfläche zeigen, wechselt sie 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 einem Wert und dem nächsten zu erwarten ist, und er kann daher nicht garantieren, dass er übertragen werden kann. Dieses Beispiel reicht jedoch noch einen Schritt weiter und dient der Animierung von CSS-Verläufen. Der folgende CSS-Code 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 von linear-gradient ist, und damit den linearen Farbverlauf animiert. Sehen Sie sich den Glitch unten an, sehen Sie sich den vollständigen Code an und

Fazit

Houdini wird auf dem Weg zu Browsern und damit auch völlig neue Möglichkeiten, mit CSS zu arbeiten und zu erweitern. Die Paint API wurde bereits veröffentlicht und ist jetzt „Custom Props and Vals“ (Benutzerdefinierte Props und Vals). Damit wird unsere Creative-Toolbox erweitert, sodass wir typisierte CSS-Eigenschaften definieren und zum Erstellen und Animieren neuer, interessanter Designs verwenden können. In der Houdini-Problemwarteschlange erfährst du mehr darüber. Dort kannst du uns Feedback geben und erfahren, wie es weiter für Houdini weitergeht. Houdini entwickelt Funktionen, die die "Magie" der Gestaltung und des Layouts im Web erklären. Also machen Sie sich dran und nutzen Sie diese magischen Merkmale.

Foto von Maik Jonietz auf Unsplash