Seite 5 - CSS

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.

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.

container-type: size erweitert Container Queries um die Blockrichtung, erzwingt aber echte Größen-Containment mit spürbaren Nebenwirkungen: Ohne explizite Höhe kollabiert der Container auf null. Wer versteht, wann size statt inline-size die richtige Wahl ist, vermeidet die häufigsten Layout-Bugs bei diesem Feature.

Wer Layoutgrößen immer in Pixeln oder Prozent angibt, ignoriert die natürlichen Informationen, die CSS-Boxen bereits über ihren Inhalt besitzen. CSS Intrinsic Sizing macht diese intrinsischen Größen direkt nutzbar – als Spaltenbasis im Grid, als Buttonbreite ohne Magic-Number und als Tabellenverhalten für beliebige Inhalte.

Wer in einer Schleife abwechselnd DOM-Eigenschaften liest und schreibt, zwingt den Browser zu hunderten wiederholten Layout-Berechnungen pro Frame. Layout Thrashing entsteht genau an dieser Stelle, meist unbemerkt in Scroll-Handlern, Resize-Listenern und Animationsschleifen, und ist mit dem richtigen Batching-Muster vollständig vermeidbar.

Ein Responsive Produktgrid Muster mit auto-fill, minmax und aspect-ratio sorgt dafür, dass Produktkarten auf jeder Bildschirmgröße gleichmäßig verteilt bleiben, ohne dass für jede Spaltenzahl eine eigene Media-Query gepflegt werden muss. Diese Technik ist der Unterschied zwischen einem Kategorierid, das bei jeder neuen Bildschirmbreite bricht, und einem, das sich von selbst anpasst.

Manche Teile eines Formularelements lassen sich bis heute nur ueber herstellerspezifische Pseudo-Elemente gestalten, weil es dafuer keinen standardisierten Selektor gibt. Wer Range-Slider, Datei-Upload-Buttons und Autofill-Hintergruende konsistent stylen will, kommt an webkit- und moz-Präfixen nicht vorbei, muss sie aber strukturiert und wartbar einsetzen.