CSS Houdini
CSS Houdini ist eine Sammlung von APIs, die Teile der CSS-Engine zugänglich machen. Dies erleichtert es Entwicklern, Erweiterungen für CSS zu erstellen. Diese Erweiterungen könnten dazu dienen, Features nachzubilden, die in einem Browser noch nicht verfügbar sind, neue Methoden für Layouts zu experimentieren oder kreative Rahmen oder andere Effekte hinzuzufügen.
Obwohl viele Houdini-Beispiele die kreativen Möglichkeiten der APIs demonstrieren, gibt es viele praktische Anwendungsfälle. Zum Beispiel können Sie Houdini verwenden, um erweiterte benutzerdefinierte Eigenschaften mit Typprüfung und Standardwerten zu erstellen.
Einfaches 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 so verwendet, als wäre es der Farbwert.
:root {
--background-color: blue;
}
.box {
background-color: var(--background-color);
}
Im obigen Beispiel gibt es jedoch nichts, was jemanden daran hindert, einen anderen Wert für diese Eigenschaft zu verwenden, vielleicht indem er sie auf eine Länge setzt. Wenn das geschehen ist, würde überall dort, wo die Eigenschaft verwendet wird, keine Hintergrundfarbe vorhanden sein, da background-color: 12px nicht gültig ist. Wenn Browser auf CSS stoßen, das sie nicht als gültig erkennen, wird diese Zeile verworfen.
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 sind die Worklets. Ein Worklet ist ein Modul, geschrieben in JavaScript, das CSS mittels einer der Houdini-APIs erweitert. Ein Beispiel-Worklet finden Sie auf der Seite PaintWorkletGlobalScope.registerPaint(). Sobald ein Worklet registriert wurde, können Sie es in CSS genauso wie jeden anderen Wert verwenden. Das bedeutet, dass Sie selbst wenn Sie kein JavaScript-Entwickler sind, durch die Verwendung von Worklets, die andere erstellt haben, Zugang zu Houdini APIs erhalten können.
Referenz
CSS-At-Regel und Deskriptoren
Die @property At-Regel ermöglicht es Ihnen, eine erweiterte benutzerdefinierte Eigenschaft zu registrieren.