Seite 8 - CSS

Ein Paint Worklet zeichnet einen Hintergrund nicht als fertige Bilddatei, sondern als kleines JavaScript-Programm, das der Browser bei jedem Repaint direkt in den Element-Hintergrund rendert. Wer einmal ein parametrisierbares Muster als Worklet registriert, kann es über CSS Custom Properties in beliebig vielen Komponenten wiederverwenden, ohne für jede Farbvariante eine neue SVG-Datei zu exportieren.

CSS Houdini öffnet den Browser-Rendering-Prozess für Entwickler. Benutzerdefinierte Hintergründe, Muster und Layout-Algorithmen als Worklets — direkt in CSS nutzbar. Der mächtigste, aber auch komplexeste Ansatz zur CSS-Erweiterung.

Style-Isolation war bisher das Reservat von Shadow DOM und CSS-in-JS. Mit CSS @scope bringt die nativer Kaskade eine echte Abgrenzung in reguläre Stylesheets – ohne JavaScript, ohne Custom Elements. Donut Scope, proximale Spezifität und die :scope Pseudo-Klasse machen CSS-Komponenten wartbarer und überschneidungsfreier.

Mit marks: crop und den Bleed-Deskriptoren der @page-Regel lassen sich Schnittmarken und Beschnittzugabe direkt im Browser simulieren, ganz ohne Layout- oder Druck-Software. Wer versteht, wo diese CSS-Mechanik endet und wo eine echte Druckvorstufe mit dediziertem PDF-Export beginnt, spart sich teure Überraschungen kurz vor dem Druckauftrag.

Jedes CSS Grid kennt zwei Arten von Spuren: explizite Tracks, die mit grid-template-columns und grid-template-rows bewusst definiert werden, und implizite Tracks, die der Browser automatisch erzeugt, sobald Inhalt über die definierten Grenzen hinauswächst. Wer grid-auto-rows und grid-auto-columns nicht kennt, überlässt die Größe dieser automatisch erzeugten Spuren dem Browser-Standardwert und wundert sich über Zeilen, die viel größer oder kleiner ausfallen als der Rest des Rasters.

Aktiviert ein Nutzer den Windows Hochkontrastmodus, ersetzt das Betriebssystem die meisten Farben einer Webseite kompromisslos durch eine begrenzte Systempalette. Mit forced-colors, System-Farbschlüsselwörtern und forced-color-adjust bleibt eine Oberfläche trotzdem bedienbar, statt Ränder, Icons und Zustände unsichtbar verschwinden zu lassen.

Ein wartbares Dark-Light-Token-System entsteht nicht aus einer einzigen Ebene von Custom Properties, sondern aus drei sauber getrennten Schichten: Primitive Tokens, Semantic Tokens und Component Tokens. Zusammen mit der light-dark() Funktion lässt sich diese Architektur ohne doppelte Media Queries pro Komponente umsetzen.

Gutes Focus-Management trennt Webentwicklung von zugänglicher Webentwicklung. :focus-visible zeigt den Fokusring nur bei Tastaturnutzung, :focus-within ermöglicht Container-Reaktionen — zusammen mit korrekten outline-Styles nach WCAG bilden sie das Fundament für Keyboard-Navigation ohne Kompromisse beim visuellen Design.

Die Wahl der CSS-Architektur beeinflusst Team-Produktivität, Bundle-Größe, Wartbarkeit und Onboarding-Aufwand für Jahre. CSS-in-JS, Utility-First und Vanilla CSS lösen dasselbe Problem mit fundamental unterschiedlichen Ansätzen — und jeder hat spezifische Kontexte, in denen er überlegen ist.

Divide und Space Between Utilities lösen ein spezifisches Problem, das gap allein nicht abdeckt: sichtbare Trennlinien zwischen Geschwisterelementen und Abstände in Layout-Kontexten ohne native Flex- oder Grid-Unterstützung. Wer versteht, wie divide-x, divide-y, space-x und space-y intern funktionieren, vermeidet unnötige Wrapper-Divs und wählt für jeden Anwendungsfall das passende Werkzeug.