Seite 16 - CSS

Checkboxen, Scrollbars und Datepicker gehören dem Browser, nicht der eigenen CSS-Datei, und bleiben deshalb ohne weiteres Zutun oft hell, selbst wenn die restliche Seite konsequent dunkel gestylt ist. Die color-scheme Property gibt dem Browser die fehlende Information, welches Farbschema die native Darstellung dieser Elemente verwenden soll, mit einer einzigen Zeile CSS.

Mit prefers-contrast erkennt CSS, ob ein Nutzer in den Betriebssystemeinstellungen mehr oder weniger Kontrast wünscht, und kann Farben, Rahmen und Fokus-Indikatoren gezielt anpassen. Das Media Feature schließt eine echte Lücke in der Barrierefreiheit, die bislang oft mit separaten High-Contrast-Stylesheets umständlich gelöst wurde.

Eine einzelne Änderung in einem Widget löst im Browser oft eine Style-Neuberechnung für die ganze Seite aus, weil Kaskade und Layout standardmäßig global wirken. CSS Containment begrenzt diesen Blast Radius gezielt auf einzelne Komponenten und macht aus unvorhersehbaren Rendering-Kosten eine berechenbare, lokale Angelegenheit.

Ein Scrollbalken, der plötzlich erscheint oder verschwindet, verschiebt den gesamten sichtbaren Inhalt um seine eigene Breite, weil er unter klassischem overflow: auto den verfügbaren Content-Bereich verkleinert. scrollbar-gutter: stable reserviert diesen Platz dauerhaft, egal ob der Balken gerade sichtbar ist oder nicht, und beseitigt damit einen der hartnäckigsten Layout-Shift-Bugs im Web.

CSS-Spezifität ist die häufigste Quelle unerklärlicher Styling-Konflikte. Warum greift eine Regel nicht, obwohl sie weiter unten im Stylesheet steht? Warum überschreibt ein kurzer Selektor eine scheinbar passendere Regel? Die Antwort liegt in der CSS Spezifität — einem Berechnungssystem, das jede Stylesheet-Arbeit fundiert.

Die CSS Cascade ist kein Zufallsmechanismus, sondern ein präzise definierter Algorithmus. Wer versteht, wie der Browser Herkunft, Wichtigkeit, Spezifität und Reihenfolge abwägt, schreibt Stylesheets, die berechenbar funktionieren — statt mit !important gegen die eigenen Regeln zu kämpfen.

Seitenwechsel in klassischen Multi-Page-Anwendungen wirken meist abrupt: die alte Seite verschwindet, die neue erscheint ohne Übergang. Cross-Document View Transitions schließen diese Lücke direkt im Browser, mit wenigen Zeilen CSS, ganz ohne Single-Page-Framework und ohne zusätzliches JavaScript für den Grundfall.

Der berüchtigte iOS-Safari-Bug mit 100vh hat Entwickler jahrelang beschäftigt. Die modernen CSS-Viewport-Einheiten dvh, svh und lvh lösen das Problem dauerhaft — ohne JavaScript, ohne Resize-Events und ohne fragile Workarounds. Dieser Artikel erklärt, wie Dynamic, Small und Large Viewport Units funktionieren und wann man welche Einheit wirklich braucht.

Bevor aspect-ratio in CSS ankam, brauchte jedes responsive Video einen Wrapper-Div mit padding-top Trick, jede Bildergalerie kämpfte mit springenden Layouts während des Ladens. Die aspect-ratio Eigenschaft löst dieses Problem nativ, mit einer einzigen Zeile CSS, kombinierbar mit object-fit und Container Queries für stabile, unverzerrte Medien Layouts.

Ein einziges globales Tailwind-CSS-Bundle für alle Seiten eines großen Projekts bedeutet, dass jede Route Styles lädt, die sie gar nicht braucht. Mit Multi-Entry-Builds, gezieltem Code-Splitting und Critical CSS lässt sich Tailwind CSS pro Seite oder Route so aufteilen, dass jede Route nur das CSS ausliefert, das sie tatsächlich verwendet.