CSS Houdini
CSS Houdini ist eine Sammlung von APIs, die Teile der CSS-Engine zugänglich machen und es Entwicklern ermöglichen, CSS-Erweiterungen zu erstellen. Diese Erweiterungen können Funktionen bieten, die in Browsern noch nicht verfügbar sind, mit neuen Layout-Techniken experimentieren oder kreative Rahmen und andere Effekte hinzufügen.
Während viele Houdini-Beispiele die kreativen Möglichkeiten der APIs zeigen, gibt es auch viele praktische Anwendungsfälle. Zum Beispiel können Sie Houdini verwenden, um erweiterte benutzerdefinierte Eigenschaften mit Typüberprüfung und Standardwerten zu erstellen.
Einfaches Beispiel
Eine reguläre CSS-Benutzerdefinierte Eigenschaft besteht aus einem Eigenschaftsnamen und einem Wert. So 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 handeln würde.
: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, und vielleicht einen Wert von Länge einzustellen. Würde man dies tun, hätte die Stelle, an der 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 der Verwendung von @property können wir jedoch die benutzerdefinierte Eigenschaft mit einer Syntax von <color> deklarieren. Dies zeigt, dass wir für diese Eigenschaft einen Wert benötigen, der eine gültige Farbe ist.
@property --background-color {
syntax: "<color>";
inherits: false;
initial-value: blue;
}
Houdini-Worklets
Ein Merkmal von Houdini ist der Worklet. Ein Worklet ist ein Modul, das in JavaScript geschrieben ist und CSS mit einer der Houdini-APIs erweitert. Sie können ein Beispiel-Worklet auf der Seite PaintWorkletGlobalScope.registerPaint() sehen. Sobald ein Worklet registriert wurde, können Sie es in CSS verwenden, wie jeden anderen Wert. Das bedeutet, dass Sie, selbst wenn Sie kein JavaScript-Entwickler sind, die Houdini-APIs nutzen 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.