Seite 14 - CSS

Ein kompletter Rewrite einer gewachsenen Bootstrap-Anwendung ist selten realistisch. Wer Bootstrap zu Tailwind migrieren will, ohne das Projekt für Wochen einzufrieren, braucht einen Stufenplan mit Bestandsaufnahme, Klassen-Mapping und einem sauberen Parallelbetrieb, der Seite für Seite ausrollt statt alles auf einmal zu riskieren.

Der Windows Hochkontrastmodus ersetzt fast jede vom Stylesheet definierte Farbe durch eine kleine, vom Nutzer gewählte Systempalette, und forced-color-adjust: none ist die eine CSS-Eigenschaft, die einzelne Elemente davon ausnehmen kann. Gezielt eingesetzt, bei Statusbadges, Icons und Diagrammen, deren Farbe selbst die Information trägt, schützt es echte Bedeutung, ohne die Barrierefreiheitsfunktion zu untergraben, für die der Modus überhaupt existiert.

touch-action entscheidet, welche Standardgesten wie Pinch-Zoom oder Scroll der Browser fuer ein Element uebernimmt und welche stattdessen an eigenen JavaScript-Code weitergereicht werden. pointer-events regelt eine ganz andere Frage: ob ein Element ueberhaupt auf Zeigereingaben reagiert. Wer beide Properties sauber trennt, baut Swipe-Karussells und Touch-Widgets, die sich nicht mit dem Browser um jede Geste streiten.

Mit :has() kann CSS erstmals ein Element anhand seiner Nachfahren oder nachfolgenden Geschwister auswählen, eine Fähigkeit, auf die die Sprache jahrelang gewartet hat. Diese Mächtigkeit hat aber einen Preis: :has() zwingt den Browser, für jeden Kandidaten einen kompletten Teilbaum zu durchsuchen, statt nur einen einzelnen Knoten zu prüfen, was in großen DOM-Bäumen spürbar werden kann.

Eine Sticky Checkout Summary klingt nach einer einzigen CSS Zeile, doch position sticky bricht im Checkout regelmäßig an Overflow-Containern, falschen Höhenberechnungen und Stacking-Context-Fallen. Mit dvh Einheiten, einem sauberen Scroll Container und der richtigen Grid-Struktur bleibt die Warenkorb Übersicht zuverlässig sichtbar, während der Nutzer durch die Checkout-Schritte scrollt.

prefers-color-scheme ist mehr als eine Media Query für Dunkel und Hell. Die color-scheme Property, ein sauberer Nutzer-Override und die richtige Reihenfolge beim ersten Render entscheiden darüber, ob Dark Mode nahtlos wirkt oder mit einem sichtbaren Aufblitzen des falschen Themes startet.

Das Holy Grail Layout aus Header, zwei Randspalten, Hauptbereich und Footer galt lange als eines der schwierigsten CSS Probleme überhaupt. Mit CSS Grid, template-areas, Gap und Subgrid lässt sich dasselbe Layout heute in wenigen, klar lesbaren Zeilen bauen, ganz ohne Float-Hacks, ohne Tabellen und ohne fragile absolute Positionierung.

Ein Typografie Skalensystem definiert alle Schriftgrößen eines Projekts über ein festes mathematisches Verhältnis statt über zufällig gewählte Pixelwerte. Kombiniert mit CSS Custom Properties und clamp() entsteht daraus ein einziges System aus semantischen Tokens, das responsive Größen automatisch berechnet und über das gesamte Designsystem konsistent bleibt.

Mit round(), mod() und rem() rechnet der Browser direkt in der Stylesheet-Deklaration, ohne dass ein Skript vorher Werte ausrechnen und als Custom Property injizieren muss. Wer Rastergrößen sauber runden oder Werte zyklisch wiederholen lassen will, etwa Karussell-Indizes oder Streifenmuster, findet in diesen drei Funktionen ein Werkzeug, das direkt in calc() eingebettet werden kann.

Die View Transitions API bringt das, was früher nur SPAs mit aufwendigen Frameworks erreichten, als native Browser-Funktion: nahtlose Animationen beim Seitenwechsel — mit view-transition-name für shared elements, CSS-Pseudoelementen für volle Stilkontrolle und Cross-Document-Unterstützung für Multi-Page-Apps.