Seite 6 - CSS

Jahrelang war eine Transition von oder zu einem auto-Wert in CSS schlicht nicht möglich, weil der Browser keinen numerischen Zwischenwert für auto berechnen konnte. Mit calc-size() und der Eigenschaft interpolate-size ändert sich das grundlegend: Der Browser darf jetzt selbst einen numerischen Anfangs- oder Endwert für auto ermitteln und dazwischen sauber animieren, ganz ohne JavaScript-Messungen oder feste Pixelwerte.

env() ist den meisten nur über die vier Safe-Area-Insets bekannt, mit denen sich Layouts an Notch oder Dynamic Island anpassen, dabei ist es ein allgemeiner Mechanismus für Environment-Variablen, die Browser oder Betriebssystem bereitstellen. Hier steht, was darüber hinaus existiert, einschließlich autoren-definierter Variablen, Viewport Segments für faltbare Geräte, und eine klare Abgrenzung zu Custom Properties.

Scroll Snap bringt das Verhalten klassischer Karussell-Bibliotheken direkt in den Browser: Der Nutzer scrollt frei, aber der Container rastet an definierten Positionen ein, sauber und ruckelfrei. Wer scroll-snap-type und scroll-snap-align richtig kombiniert, spart eine komplette JavaScript-Abhaengigkeit und bekommt dabei Touch-Gesten, Tastatursteuerung und Barrierefreiheit quasi geschenkt.

Filter Utilities wie blur, brightness und grayscale wirken auf den ersten Blick wie kosmetische Spielerei, lösen in Tailwind aber ein technisch anspruchsvolles Problem: mehrere Filter-Funktionen werden zu einer einzigen CSS-Deklaration komponiert. Wer versteht, wie diese Komposition funktioniert und wo Backdrop-Filter an Grenzen stoßen, baut Effekte, die auch auf Mobilgeräten flüssig bleiben.

Das CSS Multi-Column Layout ist eines der am meisten unterschätzten Layout-Module im modernen CSS. Mit column-count, column-width, column-gap und break-inside lassen sich Zeitungslayouts, Gallery-Stacking und Masonry-ähnliche Strukturen vollständig ohne JavaScript realisieren – direkt im Browser, mit nativer Unterstützung in allen modernen Engines.

Echte Feder-Physik in Animationen war lange Domäne von JavaScript-Bibliotheken wie Framer Motion oder React Spring. Die CSS-Funktion linear() erlaubt jetzt, beliebig komplexe Easing-Kurven, inklusive Overshoot und Bounce, direkt als Stützpunkt-Liste im Stylesheet zu definieren, ganz ohne Laufzeit-JavaScript.

Während oklch() und lab() eigene, in sich geschlossene Farbmodelle beschreiben, öffnet die generische color()-Funktion CSS für ein ganzes Set benannter Farbräume, darunter display-p3, a98-rgb, prophoto-rgb und rec2020. Wer Produktbilder oder Markenfarben auf modernen Displays mit größerem Farbumfang originalgetreu darstellen will, kommt an dieser Funktion kaum vorbei, muss aber auch einen sauberen Fallback für ältere Bildschirme und Browser mitdenken.

@custom-media erlaubt es, eine Media-Query-Bedingung einmal zu benennen und danach überall im Stylesheet wiederzuverwenden, statt dieselbe Breitenangabe an zwanzig Stellen zu wiederholen. Bisher übernimmt PostCSS diese Übersetzung beim Build, doch die Media Queries Level 5 Spezifikation bringt genau diese Fähigkeit direkt in den Browser.

Numerische Grid Linien wie Linie 3 oder Linie minus 2 sind für den Browser eindeutig, für Menschen aber schwer zu merken. Benannte Grid Linien und grid-template-areas übersetzen dasselbe Raster in aussagekräftige Bezeichnungen und ASCII Diagramme, die im Code selbst dokumentieren, was auf dem Bildschirm passiert.

Eine Produktgalerie rein mit CSS zu lösen klingt nach einem Trick, ist aber ein belastbares Muster: Scroll Snap Container, das Checkbox Hack Prinzip und die :target Pseudoklasse bilden Thumbnail-Navigation, Karussell und Vollbild-Ansicht ab, ohne dass ein einziges Kilobyte JavaScript geladen werden muss.