Seite 4 - CSS

mask-image maskiert ein Element per Gradient oder Bilddatei mit stufenloser Transparenz, statt es wie clip-path nur hart geometrisch zu beschneiden. Das macht die Eigenschaft zum richtigen Werkzeug für ausfransende Produktbilder, organische Hero-Flächen und ein wiederverwendbares Icon-System, das ganz ohne zusätzliche SVG-Exporte auskommt.

Ein manuell gepflegter @theme-Block gerät außer Kontrolle, sobald dieselben Farbwerte auch für native Apps, Figma oder ein zweites Frontend gebraucht werden. Ein Theme-Generator liest eine einzige JSON-Token-Datei als Single Source of Truth und erzeugt daraus automatisch den Tailwind CSS v4 @theme-Block, konsistent über alle Plattformen hinweg.

Ein einfaches Fade-in beim Scrollen kennt inzwischen fast jedes Projekt. Wirklich interessant wird Scroll-Timeline aber erst, wenn mehrere Achsen, benannte Timelines und präzise animation-range-Werte zusammenspielen, um komplexe Erzähl-Layouts ganz ohne Scroll-Event-Listener zu bauen.

Masonry-Layouts – Raster, bei denen Items unterschiedlicher Höhe lückenlos gestapelt werden – sind seit Jahren ein JavaScript-Problem. Die CSS Masonry Draft-Spezifikation bringt dieses Verhalten nativ in den Browser: grid-template-rows: masonry verspricht, was bisher nur Bibliotheken wie Masonry.js oder Isotope liefern konnten.

text-wrap balance und text-wrap pretty lösen zwei unterschiedliche Probleme beim Zeilenumbruch: balance verteilt kurze Überschriften gleichmäßig auf alle Zeilen, pretty verhindert einzelne Wörter am Ende von Fließtext-Absätzen. Wer beide Werte gezielt statt austauschbar einsetzt, gewinnt spürbar sauberere Typografie ohne zusätzliches JavaScript.

Die color-contrast() Funktion aus CSS Color Level 5 lässt den Browser selbst entscheiden, welche von mehreren Textfarben zum jeweiligen Hintergrund den besten WCAG-Kontrast liefert. Das reduziert manuelle Kontrastberechnung und macht dynamisch generierte Hintergründe automatisch barrierefrei lesbar.

Eine vertikale Timeline Komponente zeigt Ereignisse chronologisch entlang einer senkrechten Linie und aktiviert Etappen beim Scrollen. Mit CSS Grid für das Layout und Alpine.js x-intersect für Scroll-Reveal Animationen entsteht eine flexible Timeline Komponente, ohne eine dedizierte Timeline Bibliothek einzubinden.

Eine lange Tabelle, die beim Drucken mitten in einer Zeile umbricht, ist einer der sichtbarsten CSS-Fehler auf Rechnungen und Bestellbestaetigungen. Mit break-inside: avoid fuer Zeilen und einem korrekt eingesetzten thead als wiederholtem Kopf lassen sich Seitenumbrueche gezielt so steuern, dass jede Seite fuer sich lesbar bleibt, ganz ohne JavaScript oder serverseitiges PDF-Rendering.

Ein eingebundenes Payment-Widget oder Chat-Widget bringt fast immer eigenes CSS mit, das sich nicht anfassen lässt und trotzdem nicht mit dem eigenen Design kollidieren soll. Cascade Layers lösen dieses Problem strukturell: Fremdes CSS landet in einer eigenen Kaskadenschicht unterhalb der eigenen Layer und verliert damit garantiert jeden Spezifitäts-Wettlauf, ganz ohne dass eine einzige fremde Regel angefasst werden muss.

Suchbegriffe hervorheben, Diff-Änderungen visualisieren, Spracherkennungs-Treffer markieren — bisher erforderte das alles das Einwickeln von Textknoten in span-Elemente, was den DOM korrumpiert und Barrierefreiheit gefährdet. Die CSS Custom Highlights API löst das Problem elegant: Ranges definieren, registrieren, per ::highlight() stylen — fertig.