CSS Houdini
CSS Houdini ist eine Reihe von APIs, die Teile der CSS-Engine zugänglich machen. Dies erleichtert es Entwicklern, Erweiterungen für CSS zu erstellen. Diese Erweiterungen können genutzt werden, um Funktionen zu polyfillen, die in einem Browser noch nicht verfügbar sind, um mit neuen Layout-Methoden zu experimentieren oder kreative Ränder oder andere Effekte einzufügen.
Während viele Houdini-Beispiele die kreativen Möglichkeiten der APIs zeigen, gibt es auch viele praktische Anwendungsfälle. Beispielsweise können Sie Houdini verwenden, um erweiterte benutzerdefinierte Eigenschaften mit Typprüfung und Standardwerten zu erstellen.
Einfache Beispiel
Eine reguläre benutzerdefinierte CSS-Eigenschaft besteht aus einem Eigenschaftsnamen und einem Wert. Daher könnte ich eine benutzerdefinierte Eigenschaft namens --background-color erstellen und erwarten, dass ihr ein Farbwert zugewiesen wird. Der Wert wird dann im CSS verwendet, als ob es sich um den Farbwert handelt.
:root {
--background-color: blue;
}
.box {
background-color: var(--background-color);
}
Im obigen Beispiel gibt es jedoch nichts, das jemanden davon abhält, einen anderen Wert für diese Eigenschaft zu verwenden, vielleicht wird es auf eine Länge gesetzt. Wenn dies geschieht, hat alles, wo die Eigenschaft verwendet wird, keine Hintergrundfarbe, da background-color: 12px nicht gültig ist. Wenn Browser auf CSS stoßen, das sie nicht als gültig erkennen, werfen sie diese Zeile weg.
Mit @property können wir jedoch die benutzerdefinierte Eigenschaft mit einer Syntax von <color> deklarieren. Dies zeigt, dass wir möchten, dass diese Eigenschaft einen Wert hat, der eine gültige Farbe ist.
@property --background-color {
syntax: "<color>";
inherits: false;
initial-value: blue;
}
Houdini Worklets
Ein Merkmal von Houdini ist das Worklet. Ein Worklet ist ein Modul, geschrieben in JavaScript, das CSS mit einer der Houdini-APIs erweitert. Sie können ein Beispiel-Worklet auf der Seite PaintWorkletGlobalScope.registerPaint() sehen. Sobald ein Worklet registriert ist, können Sie es im CSS wie jeden anderen Wert verwenden. Dies bedeutet, dass Sie selbst dann, wenn Sie kein JavaScript-Entwickler sind, auf Houdini-APIs zugreifen können, indem Sie Worklets verwenden, die andere erstellt haben.
Referenz
CSS-At-Regel und Deskriptoren
Die @property-At-Regel ermöglicht es Ihnen, eine erweiterte benutzerdefinierte Eigenschaft zu registrieren.