Seite 11 - CSS

Eine ungeregistrierte Custom Property vererbt in CSS immer, unabhängig davon, ob ihr Name einen lokalen, komponentenspezifischen Wert suggeriert. Erst @property gibt einer Custom Property einen festen Typ, einen garantierten Initialwert und ein explizites Vererbungsverhalten, und schließt damit eine ganze Klasse von Bugs, die in großen Design-Systemen sonst schwer aufzuspüren sind.

Echte Komponentenisolation braucht zwei getrennte Garantien: kollisionsfreie Klassennamen und eine vorhersagbare Spezifitätsreihenfolge. CSS Modules liefern die erste Garantie zur Build-Zeit, native Cascade Layers die zweite zur Laufzeit, und zusammen entsteht eine Isolation, die ohne Shadow DOM und ohne UI-Framework auskommt.

will-change verspricht flüssigere Animationen durch GPU-Layer-Promotion — und hält dieses Versprechen, wenn es korrekt eingesetzt wird. Auf zu vielen Elementen dauerhaft gesetzt, verursacht es hingegen Memory-Leaks, erhöhten GPU-Memory-Verbrauch und kann Animationen langsamer machen, statt sie zu beschleunigen.

Die CSS Popover API löst ein jahrelanges Problem im Web: Dropdowns, Tooltips und modale Overlays mussten immer mit JavaScript implementiert werden. Mit dem nativen popover-Attribut, ::backdrop und der Pseudoklasse :popover-open liefert der Browser jetzt eine vollständige Lösung – zugänglich, performant und ohne externe Abhängigkeiten.

Ein gut gebautes Print Stylesheet entscheidet darüber, ob ein Ausdruck lesbar ist oder ob Navigation, Werbebanner und abgeschnittene Tabellen den Inhalt unbrauchbar machen. Mit media print, gezielten Seitenumbrüchen und sichtbar gemachten Linkzielen wird aus einer Bildschirmansicht ein Dokument, das auch auf Papier funktioniert.

Die meisten heute verkauften Bildschirme können deutlich mehr Farben darstellen, als sRGB jemals kodieren kann. Mit der color() Funktion und display-p3 lassen sich diese zusätzlichen, kräftigeren Farbtöne gezielt in CSS nutzen, mit sauberem Fallback für Geräte, die nur den klassischen Gamut unterstützen.

Lange Selektorlisten mit denselben Deklarationen sind ein Wartungsproblem jedes größeren Stylesheets. CSS :is() und :where() komprimieren solche Listen zu einer einzigen Regel, mit präziser Kontrolle über die Spezifität – und mit einem Fehlertoleranzverhalten, das klassische Komma-Listen nicht haben.

Webfonts sind eine der häufigsten Ursachen für schlechte Core Web Vitals — speziell für hohe CLS-Werte (Cumulative Layout Shift). CSS font-display steuert, wie und wann ein Browser auf geladene Schriften umschaltet. Mit size-adjust lässt sich der visuelle Sprung beim Schriftwechsel auf nahezu null reduzieren.

Gestufte Kapitelzähler, verschachtelte Listen mit gemischten Stilen, Custom Markers für Listenelemente — all das leistet reines CSS mit counter-reset, counter-increment und counter(). Wer das System einmal verstanden hat, streicht JavaScript-Zähler dauerhaft aus seinem Werkzeugkasten.

Die meisten Entwickler kennen nth-child nur über odd und even, dabei steckt dahinter eine vollständige lineare Formel, die weit komplexere Muster ermöglicht. Diese Sammlung erklärt die An+B Mathematik, nth-last-child und die of S Syntax anhand konkreter Rezepte für Grids, Listen und Paginierung.