Seite 17 - CSS

Hanging Punctuation setzt Anführungszeichen und andere Satzzeichen optisch außerhalb des Textblocks, damit die linke Textkante über alle Zeilen hinweg gerade wirkt. Mit der CSS-Eigenschaft hanging-punctuation lässt sich dieser jahrhundertealte Trick aus der Buchdruck-Typografie mit einer einzigen Zeile CSS umsetzen, ganz ohne negative Margins oder JavaScript-Hacks.

Nicht jedes Projekt kann und muss auf einen Schlag komplett auf Tailwind umgestellt werden. Tailwind neben Legacy CSS zu betreiben ist eine bewusste Zwischenlösung, die neue Features direkt mit Utilities baut, während bestehendes, handgeschriebenes CSS unverändert weiterläuft, bis es Komponente für Komponente abgelöst wird.

CSS Nesting ist 2026 in allen modernen Browsern nativ verfügbar. Der & Selector, verschachtelte Media Queries und At-Rules wie @layer und @supports innerhalb von Regelblöcken machen Präprozessoren für viele Projekte überflüssig. Was früher Sass, Less oder PostCSS erforderte, funktioniert heute direkt im Browser — ohne Build-Step, ohne Source Maps, ohne Abhängigkeiten.

oklch() ist der modernste Farbraum in CSS Color Level 4 und löst fundamentale Probleme von hsl() und rgb(): Die Helligkeitsachse ist wahrnehmungsgleichmäßig, Farbverläufe durchqueren keine entsättigten Grautöne, und der Zugang zum P3-Display-Gamut ermöglicht lebhaftere Farben auf modernen Bildschirmen — direkt im Browser, ohne Bildbearbeitungssoftware.

CSS :has() ist mehr als ein Parent-Selektor — es ist ein vollständiger Kontextselektor. Layout-Entscheidungen, die bisher JavaScript-Event-Handler erforderten, lassen sich mit :has() deklarativ im Stylesheet treffen. Das verändert, wie man CSS-Architekturen aufbaut.

Jahrelang brauchte man JavaScript, um ein Element beim Einblenden aus display:none zu animieren. CSS @starting-style löst dieses Problem nativ — und ermöglicht elegante Übergänge für Popover, Dialoge und dynamisch eingefügte Inhalte ohne eine Zeile JavaScript.

Masonry-Layout packt Karten unterschiedlicher Höhe platzsparend zusammen, subgrid richtet innere Elemente präzise an den Spurenrastern eines übergeordneten Grids aus. Kombiniert lösen beide Techniken ein Problem, das reines Flexbox oder ein einfaches Grid allein nicht schafft, allerdings nur unter genauer Kenntnis dessen, was Masonry heute wirklich unterstützt und was nicht.

Abstände zwischen Flex-Items über margin zu setzen bedeutet fast immer, im Anschluss den Rand-Effekt an den äußeren Kanten wieder mit einem Selektor wie :last-child auszugleichen. Die CSS-Eigenschaft gap löst dieses Problem an der Wurzel: Sie erzeugt Abstand ausschließlich zwischen den Items, niemals an den äußeren Rändern des Containers, und macht damit einen der am häufigsten wiederholten CSS-Hacks überflüssig.

Responsive Typographie, adaptive Abstände und flüssige Layouts ohne einen einzigen Breakpoint — das ist das Versprechen von CSS calc(), min(), max() und clamp(). Wer diese vier Funktionen und ihre Verschachtelung beherrscht, schreibt wartbarere Stylesheets mit weniger Code und weniger Browser-Streitigkeiten zwischen Pixel und Viewport.

Bei text-align: justify richtet der Browser jede Zeile eines Absatzes bündig zum linken und rechten Rand aus, mit einer Ausnahme: die letzte Zeile bleibt standardmäßig linksbündig. text-align-last ist die Property, die genau dieses eine Detail unabhängig vom Rest des Absatzes steuert, und sie löst einen der häufigsten Verwirrungspunkte rund um Blocksatz im Web.