Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini

Übergänge und Datenschutz im Preisvergleichsportal

Sam Richard

Benutzerdefinierte CSS-Eigenschaften, die auch als CSS Variablen können Sie Ihre eigenen Eigenschaften in CSS definieren und deren Werte in Ihrem Preisvergleichsportal. Obwohl sie heute unglaublich nützlich sind, haben sie Mängel, die sie schwierig zu sein: Sie können einen beliebigen Wert annehmen, durch etwas Unerwartetes überschrieben wird, übernehmen sie immer ihre Werte von und Sie können sie nicht umstellen. Mit den CSS-Eigenschaften und Values API Level 1 jetzt in Chrome 78 verfügbar, werden diese Schwachstellen übergangen, sodass CSS benutzerdefinierten Eigenschaften ist unglaublich leistungsstark!

Was ist Houdini?

Bevor wir über die neue API sprechen, wollen wir kurz über Houdini sprechen. CSS-TAG Die Houdini Task Force, besser bekannt als CSS Houdini oder einfach Houdini, besteht aus „Funktionen zu entwickeln, die die ‚Magie‘ erklären, Stils und Layouts im Web“. Die Houdini-Spezifikationen sind wurde entwickelt, um die Leistungsfähigkeit des Rendering-Moduls des Browsers zu nutzen, sodass sowohl einen tieferen Einblick in unsere Stile und die Möglichkeit, unser Rendering-Modul zu erweitern. Damit werden CSS-Werte in JavaScript und Polyfilling ohne Leistungseinbußen endlich möglich. Houdini hat das Potenzial, die Kreativität im Web enorm steigern.

CSS Properties and Values API – Ebene 1

CSS Properties and Values API-Ebene 1 (Houdini-Requisiten und Vals) können wir unseren benutzerdefinierten Eigenschaften Strukturen verleihen. Dies ist die aktuelle bei der Verwendung von benutzerdefinierten Eigenschaften:

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

Da benutzerdefinierte Eigenschaften keine Typen haben, können sie unerwartet ü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 --my-color nicht eingegeben wurde, weiß sie nicht, dass eine URL ungültig ist. Farbwert! 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, damit der Browser weiß, was es sein soll!

Jetzt wird die benutzerdefinierte Eigenschaft --my-color als Farbe registriert. Dadurch weiß das System, welche Werte zulässig sind und wie er sie eingeben und verarbeiten kann, Property!

Anatomie 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

Analysieren 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

Anfangswert der benutzerdefinierten Eigenschaft

Wirf einen genaueren Blick auf syntax. Es gibt eine Reihe von gültigen Optionen von Zahlen über Farben bis hin zu <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 mit folgenden Werten akzeptiert wird: diese Syntax. <length>+ wäre z. B. eine durch Leerzeichen getrennte Liste mit Bahnen
  • „Anfügen“# bedeutet, dass eine durch Kommas getrennte Liste mit Werten von diese Syntax. Beispielsweise wäre <color># eine durch Kommas getrennte Liste von Farben
  • Das Hinzufügen von | zwischen Syntaxen oder Kennungen bedeutet, dass jede der bereitgestellten Optionen gültig sind. <color># | <url> | magic lässt beispielsweise Folgendes zu: eine durch Kommas getrennte Liste von Farben, eine URL oder das Wort magic

Gotchas

Es gibt zwei Godchas mit Houdini-Requisiten und Vals. Erstens: Sobald definiert ist, gibt es keine Möglichkeit, eine vorhandene registrierte Eigenschaft zu aktualisieren, und es wird versucht, erneut registrieren, wird eine Fehlermeldung ausgegeben, die besagt, dass die Property definiert.

Zweitens werden registrierte Eigenschaften im Gegensatz zu Standard-Properties nicht validiert, wenn analysiert werden. Stattdessen werden sie bei ihrer Berechnung validiert. Das bedeutet, dass sowohl dass ungültige Werte bei der Überprüfung des Elements Eigenschaften und das Einfügen einer ungültigen Eigenschaft nach einer gültigen kann nicht auf das Fallback mit dem gültigen Wert, wird für eine ungültige Eigenschaft jedoch die registrierte Standardwert der Property.

Benutzerdefinierte Eigenschaften animieren

Registrierte benutzerdefinierte Eigenschaften bieten einen zusätzlichen Vorteil, der über die Typüberprüfung hinausgeht: die kann es 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 Sie den Mauszeiger über die Schaltfläche bewegen, wechselt die Animation von Rot zu Grün. Ohne wird sie von einer Farbe zur anderen gewechselt. ohne registriert zu sein, weiß der Browser nicht, was ihn zwischen einem und der nächste und können daher nicht garantiert werden. In diesem Beispiel gehen wir noch einen Schritt weiter: Animieren von CSS-Verläufen! Die folgende CSS-Elemente können 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. unseren linearen Farbverlauf animiert. Schau dir den Glitch unten an, um den vollständigen Code zu sehen in Aktion und probieren Sie es selbst aus.

Fazit

Houdini wird bald in Browsern eingeführt. von der Arbeit mit CSS aus. Mit Farbe API wurde bereits versendet und jetzt mit benutzerdefinierten Requisiten und Vals wird unsere Creative-Toolbox erweitert, sodass wir typisierte CSS-Eigenschaften definieren und verwenden, um neue und spannende Designs. Weitere Informationen folgen auch der Houdini-Ausgabe in der Sie Feedback geben können Feedback und schauen uns an, wie es bei Houdini weitergeht. Houdini existiert, um Funktionen zu entwickeln, die die „Magie“ erklären, von Styling und Layout im Web. Machen Sie sich also auf diese magischen Funktionen sinnvoll nutzen.

Foto von Maik Jonietz am Unsplash