Seite 7 - CSS

CSS entwickelt sich 2026 schneller als je zuvor. Container Queries, Cascade Layers, @property, native Nesting und :has() sind Baseline und produktionsreif. Neue Features wie CSS Masonry, Anchor Positioning und Scroll-driven Animations schließen zur Produktionsreife auf. Dieser Artikel gibt einen strukturierten Überblick.

Der native Browser-Pfeil eines select-Elements passt selten zu einem durchdachten Design-System, und appearance: none entfernt genau dieses eine visuelle Detail, ohne die eingebaute Tastatursteuerung, Suche per Tastendruck oder Screenreader-Ankündigung zu beeinträchtigen. Wer diese Technik richtig einsetzt, spart sich den kompletten Nachbau eines Dropdowns per JavaScript.

Wer die komplette Tailwind-CSS-Datei render-blockierend lädt, verschenkt wertvolle Millisekunden beim ersten sichtbaren Pixel. Dieser Artikel zeigt, wie Extraction-Tools den tatsächlich sichtbaren Regelsatz einer Seite automatisiert erfassen, wie inline ausgeliefertes Critical CSS und gezielt verzögertes restliches Stylesheet zusammenspielen, und wann sich der Aufwand für einen Magento oder Hyvä Shop wirklich lohnt.

Einfache group-hover- und peer-focus-Muster kennt jeder, der mit Tailwind arbeitet. Sobald aber mehrere Ebenen verschachtelt sind, mehrere Kindzustände nach oben durchgereicht werden müssen oder ein Formular auf den Zustand eines völlig anderen Elements reagieren soll, reichen die Basics nicht mehr aus. Named groups, group-has, peer-has und Datenattribut-Zustandsketten lösen genau diese fortgeschrittenen Group und Peer State Kombinationen.

Sobald ein Shop eine Store-View mit arabischer oder hebräischer Sprache anbietet, muss sich das Layout automatisch an die Schreibrichtung anpassen, von rechts nach links statt von links nach rechts. Die Pseudoklasse :dir() reagiert direkt auf die tatsächlich berechnete Textrichtung eines Elements, unicode-bidi steuert das Verhalten bei gemischtem Text, und logical properties übernehmen den Rest, ohne dass ein einziges JavaScript-Snippet die Richtung erkennen müsste.

Lange Produktlisten, Facettenseiten und Kommentarbereiche zwingen den Browser dazu, tausende Elemente zu layouten und zu malen, obwohl nur ein Bruchteil davon sichtbar ist. Die CSS Eigenschaften contain und content visibility geben der Rendering Engine gezielt Kontext, welche Bereiche isoliert und welche komplett übersprungen werden können, ohne dabei Layout Shifts zu verursachen.

Glassmorphism ist mehr als ein Design-Trend — es ist ein Testobjekt für CSS-Performance. backdrop-filter: blur() kann auf einem Mobilgerät zum GPU-Bottleneck werden, wenn man es falsch einsetzt. Dieser Artikel zeigt, wie blur, saturate und brightness korrekt kombiniert werden, wo die Performance-Grenzen liegen und wie Fallback-Strategien aussehen, die in allen Browsern funktionieren.

Ein Themewechsel, der einfach nur die Klasse tauscht, wirkt technisch korrekt, fühlt sich aber ruckartig an. Mit der View Transitions API, mit @property registrierten Farbvariablen und einem schlanken Alpine.js Store lässt sich derselbe Wechsel in Tailwind CSS v4 als weiche Überblendung umsetzen, ganz ohne zusätzliche JavaScript-Bibliothek.

Seit dem iPhone X mit seiner Notch und dem iPhone 14 Pro mit dem Dynamic Island müssen Webentwickler sicherstellen, dass Inhalte nicht unter Hardware-Elementen verschwinden. CSS env() mit den safe-area-inset-* Variablen ist die standardisierte Lösung — für Browser, PWAs und native WebViews gleichermaßen.

Scroll-Animationen, Parallax-Effekte und Reveal-Übergänge wurden jahrelang mit JavaScript-Bibliotheken umgesetzt. CSS Scroll-Driven Animations machen das obsolet: animation-timeline, scroll() und view() ermöglichen performante, deklarative Scroll-Animationen direkt im Stylesheet — auf dem Compositor-Thread, ohne Layout-Thrashing.