Jedes CSS-Stylesheet, das im ohne Optimierung eingebunden ist, blockiert den Browser bis zum vollständigen Download und Parsen. Critical CSS inline zu setzen und den Rest asynchron zu laden ist die wirkungsvollste Einzelmaßnahme für bessere Core Web Vitals — und eine, die rein auf CSS-Ebene umgesetzt werden kann.
Eine CSS-Animation, die auf dem Compositor-Thread läuft, kann nicht vom JavaScript-Main-Thread blockiert werden. Wer verstehen will, warum manche Animationen bei 60fps fließen und andere ruckeln, muss den Weg vom CSS-Property zur GPU-Layer kennen — und wann will-change hilft statt schadet.
CSS only Bildzoom für Produktseiten nutzt background-size, transform scale und die :target Pseudoklasse, um Detailansichten, Hover-Lupe und Vollbild-Zoom zu bauen, ohne dass eine externe Zoom-Bibliothek geladen werden muss und ohne dass Mausbewegungen in JavaScript berechnet werden.
overflow: clip ist die modernere, oft performantere Alternative zu overflow: hidden. Der entscheidende Unterschied liegt nicht im sichtbaren Ergebnis, sondern in den unsichtbaren Nebeneffekten: clip erzeugt keinen Stacking Context und kein neues Block Formatting Context, vermeidet damit ungewollte z-Index-Probleme und ermöglicht präzisere Paint-Isolation für den Browser-Renderer.
Ein Range-Input gehoert zu den Formularelementen mit den groessten Unterschieden zwischen Browsern, weil Track, Thumb und Fuellstand jeweils eigene, herstellerspezifische Selektoren benoetigen. Mit den richtigen CSS-Techniken laesst sich ein vollstaendig individueller Slider bauen, ohne eine zusaetzliche JavaScript-Bibliothek einzubinden.
Klassisches Responsive Design denkt in festen Gerätebreiten und drei bis vier Breakpoints. Intrinsic Web Design dreht diese Perspektive um: das Layout reagiert direkt auf seinen eigenen Inhalt und den tatsächlich verfügbaren Platz, mit minmax, clamp, auto-fit und Container Queries als praktischen Werkzeugen für diesen Ansatz.
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.