Seite 10 - CSS

Sobald eigenes CSS außerhalb von Utility-Klassen geschrieben wird, taucht dieselbe Frage immer wieder auf: Wie kommt man an die Werte aus @theme, ohne sie doppelt zu pflegen? Die theme() Funktion in Tailwind CSS v4 beantwortet genau das, und sie funktioniert anders, als man es von CSS Custom Properties erwarten würde.

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.

Color Fonts speichern mehrere Farbschichten pro Glyphe direkt in der Schriftdatei, von mehrfarbigen Icon-Sets bis zu Emoji-Fonts. Mit @font-palette-values lässt sich diese Werkspalette per CSS überschreiben und an das eigene Theme anpassen, ganz ohne SVG-Sprites oder mehrere Icon-Dateien pro Farbvariante.

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.

Jede professionelle Schriftdatei enthält weit mehr als einen einzigen Zeichensatz: Ligaturen, alternative Glyphen, Kapitälchen und stilistische Sets liegen fertig in der Font-Datei, bleiben aber ungenutzt, solange niemand sie über CSS anspricht. font-variant-alternates und seine Geschwister-Properties machen genau das möglich, ohne JavaScript und ohne zusätzliche Schriftdateien.

Die cursor-Property kann mehr als eine Handvoll Systemsymbole umschalten: Mit url() lassen sich eigene Cursor-Bilder einbinden, mit mehrstufigen Fallback-Ketten bleibt die Bedienung auch dann verstaendlich, wenn eine Grafik nicht laedt. Wer eigene Cursor einsetzt, muss aber genau wissen, wo sie einen echten Mehrwert bringen und wo sie nur die Usability verschlechtern.

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.