Seite 12 - CSS

CSS Grid vs. Flexbox ist keine Glaubensfrage, sondern eine präzise Entscheidung nach Layout-Dimension. Wer die fundamentalen Unterschiede versteht, wählt das richtige Werkzeug für jede Situation — und kombiniert beide Systeme dort, wo es sinnvoll ist.

CSS Custom Properties sind mächtig, aber untypisiert — der Browser behandelt sie als reine Strings. CSS @property ändert das grundlegend: Mit Typ-Deklaration, Vererbungskontrolle und initialem Wert werden Custom Properties zu vollwertigen, animierbaren CSS-Werten. Gradienten, Farben und Zahlen lassen sich damit interpolieren und mit Transitions verbinden.

Jede Textzeile im Browser trägt unsichtbaren Leerraum über und unter den eigentlichen Buchstaben, eine Folge der Schriftart-Metriken, die für den Zeilenabstand reserviert werden. Mit text-box-trim und text-box-edge lässt sich dieser Leerraum gezielt kappen, ohne die fragilen negative Margin Tricks, die Layouts bei jedem Font-Wechsel neu justieren mussten.

Variable Fonts bündeln eine komplette Schriftfamilie mit allen Schnitten in einer einzigen Datei und lassen sich per CSS stufenlos zwischen Gewicht, Breite und optischer Größe interpolieren. Wer die Achsen versteht und sauber einbindet, spart Ladezeit und gewinnt gleichzeitig gestalterische Kontrolle, die statische Schriftschnitte nie geboten haben.

Die Selektoren-Ebene 4 hat das CSS-Werkzeugkasten grundlegend erweitert. CSS Selectors Level 4 bringt :has als lang ersehnten Eltern-Selektor, :is und :where für kompakte Selektorlisten, ein erweitertes :not und eine neue :nth-child of-Syntax. Diese Selektoren ersetzen viele JavaScript-Workarounds und reduzieren CSS-Redundanz erheblich.

is und where werden meist als reine Abkürzung für lange Selektorlisten vorgestellt, dabei liegt ihr größter Wert in der Spezifitätskontrolle. where() erzeugt Null-Spezifität für Resets und Design-Systeme, is() erbt die höchste Spezifität seines Arguments, ohne dass Entwickler jede Kombination manuell ausschreiben müssen.

Ein Bildvergleichsslider zeigt zwei überlagerte Bilder und lässt Nutzer per Ziehen die Grenze zwischen Vorher und Nachher verschieben. Mit CSS clip-path, einheitlichen Pointer Events und Alpine.js als reaktiver Zustandsschicht entsteht diese Interaktion ganz ohne jQuery Plugin und ohne zusätzliches Slider Framework.

Negative Grid-Linien-Nummern zaehlen vom Ende des Grids rueckwaerts, sodass grid-column: 1 / -1 immer die volle Breite abdeckt, egal ob das Grid drei, sechs oder zwoelf Spalten hat. Wer positive Linien-Nummern hart codiert, muss bei jeder Aenderung der Spaltenanzahl jede Platzierung von Hand nachziehen. Negative Linien machen das Layout robust gegen genau diese Aenderung.

Die klassischen Pseudo-Klassen :valid und :invalid feuern, sobald ein Formularfeld existiert, oft schon vor dem ersten Tastendruck. Das führt zu roten Rahmen um leere Pflichtfelder direkt beim Laden der Seite. Die neueren Pseudo-Klassen :user-valid und :user-invalid warten dagegen auf echte Nutzerinteraktion und lösen dieses Problem vollständig ohne JavaScript.

Natives CSS-Nesting erlaubt es, verschachtelte Selektoren direkt im Stylesheet zu schreiben, ohne Präprozessor. Jede zusätzliche Verschachtelungsebene erhöht dabei aber automatisch die Spezifität des zusammengesetzten Selektors und die Zahl der Zeichen, die der Browser beim Parsen und Matching verarbeiten muss, was ab einer bestimmten Tiefe echte Wartbarkeits- und Performance-Konsequenzen hat.