Seite 15 - CSS

Das dialog-Element bringt Backdrop, automatischen Fokus-Trap, Schliessen per ESC-Taste und Formular-Rueckgabewerte bereits mit, ohne eine einzige Zeile Modal-Bibliothek. Mit gezieltem CSS, inklusive starting-style-Animationen fuer sanftes Ein- und Ausblenden, wird daraus ein vollstaendig gestaltetes, barrierefreies Modal.

Jede Animation durchläuft im Browser die Rendering-Pipeline aus Layout, Paint und Composite, und wer width, top oder margin animiert, zwingt den Browser bei jedem einzelnen Frame zu teuren Neuberechnungen. Dieser Artikel zeigt, warum transform und opacity fast kostenlos auf dem Compositor-Thread laufen, wie will-change korrekt eingesetzt wird und wie sich bestehende Animationen gezielt refactoren lassen.

Hardcodierte Farbwerte, die an zwanzig Stellen geändert werden müssen — das ist das Symptom eines fehlenden Theming-Systems. CSS Custom Properties schaffen die Grundlage für wartbare Design-Systeme: ein Ort für jeden Wert, kaskadierendes Überschreiben auf Komponentenebene und Dark Mode ohne eine Zeile JavaScript.

1fr klingt nach einem einfachen, flexiblen Anteil, verhält sich aber nicht so, wie es aussieht. Grid-Items haben eine implizite Mindestgröße, die größer sein kann als ihr fr-Anteil, und genau das erzeugt den Overflow-Bug, der minmax(0, 1fr) zur eigentlichen Standardlösung macht statt zu einer Optimierung für Sonderfälle.

position: sticky kann die Kopfzeile und die erste Spalte einer Tabelle gleichzeitig fixieren, rein mit CSS, aber die Zelle, an der beide sich überschneiden, braucht eine bewusst gestaffelte Z-Index-Rangfolge, sonst wird sie von der einen oder anderen Achse überlagert. Hier steht das vollständige Muster, einschließlich der Stacking-Context-Falle, an der z-index scheinbar grundlos aufhört zu wirken.

object-fit entscheidet, ob ein Bild in seinem Container gestaucht, beschnitten oder unveraendert dargestellt wird, waehrend object-position den Fokuspunkt des Zuschnitts festlegt. Zusammen ersetzen beide Eigenschaften serverseitiges Bildzuschneiden fuer die meisten Layout-Faelle und funktionieren, anders als background-size, auch mit echten img- und video-Elementen inklusive Alt-Text und Ladeoptimierung.

Lange Produktlisten, Artikel-Feeds und Dokumentationsseiten zwingen den Browser, Layout und Style für tausende Elemente zu berechnen, auch wenn davon nur ein Bruchteil sichtbar ist. content-visibility überspringt diese Arbeit gezielt für Bereiche außerhalb des Viewports und macht aus einer trägen langen Seite eine Seite, die sich anfühlt wie eine kurze.

Die Wahl der richtigen CSS Methodik entscheidet über Wartbarkeit, Onboarding-Zeit und Refactoring-Aufwand eines Projekts über Jahre hinweg. BEM, Utility First und CSS Modules lösen dasselbe Grundproblem, nämlich Namenskollisionen und unkontrollierte Kaskade, mit fundamental unterschiedlichen Kompromissen bei Lesbarkeit, Build-Komplexität und Teamdisziplin.

Klassische CSS-Custom-Properties sind reine Zeichenketten ohne Typ, weshalb der Browser sie nicht animieren kann, selbst wenn der Wert wie eine Zahl oder ein Winkel aussieht. Mit der @property-Regel lassen sich Custom Properties dagegen mit einem echten Syntax-Typ, einem Vererbungsverhalten und einem Initialwert registrieren, wodurch sie plötzlich animierbar werden. Dieser Artikel zeigt, wie sich @property sinnvoll mit Tailwind CSS kombinieren lässt, mit einem praktischen Beispiel für eine animierte Gradient-Winkel-Rotation.

Design Tokens lösen ein Synchronisationsproblem, das jedes plattformübergreifende Produkt betrifft: Farben, Abstände und Typografie müssen in Web, iOS und Android identisch sein, ohne dass drei Teams denselben Wert manuell dreifach pflegen. Eine automatisierte Transformationspipeline macht aus einer einzigen JSON-Quelle konsistentes CSS, Swift und Kotlin, ohne Drift zwischen Plattformen.