typisierte Custom Properties — animierbar und validiert
CSS Custom Properties sind mächtig, aber untypisiert — der Browser behandelt sie als reine Strings. CSS @property ändert das grundlegend: Mit Typ-Deklaration, Vererbungskontrolle und initialem Wert werden Custom Properties zu vollwertigen, animierbaren CSS-Werten. Gradienten, Farben und Zahlen lassen sich damit interpolieren und mit Transitions verbinden.
Inhaltsverzeichnis
- 1. Was @property löst
- 2. Der syntax-Descriptor: Typen für Custom Properties
- 3. inherits — Vererbungskontrolle
- 4. initial-value — sichere Fallback-Werte
- 5. Animierbarkeit: Custom Properties interpolieren
- 6. Gradienten mit @property animieren
- 7. Zahlen-Properties für CSS-Counter und Layout
- 8. CSS.registerProperty() in JavaScript
- 9. @property vs. untypisierte Custom Properties
- 10. Zusammenfassung