Fließtext, der mitdenkt: Spalten, Drop Caps und Zitate ohne Breakpoints

Container Queries haben die Art, wie NativeCSS über "responsiv" denkt, grundlegend verändert. Statt eine Handvoll fester Viewport-Breiten zu bedienen, reagiert jede Komponente auf ihre eigene, tatsächlich verfügbare Breite - eine Karte verhält sich in einer schmalen Sidebar automatisch anders als im breiten Hauptbereich, ganz ohne eine einzige Zeile JavaScript. Dieser Fließtext hier ist ein weiteres Beispiel: column-width statt einer festen Spaltenzahl lässt den Browser selbst entscheiden, wie viele Spalten in die verfügbare Breite passen.

Der Drop Cap oben nutzt dieselbe Logik gleich zweifach: initial-letter selbst ist bereits nativ (kein Padding-Gefrickel, keine Höhenberechnung von Hand), und seine Größe wächst zusätzlich per Container Query, sobald der umgebende .ncss-container breit genug für einen wirklich dramatischen Auftritt ist - in einer schmalen Spalte bleibt er dagegen bewusst zurückhaltender.

"Breakpointless heißt nicht 'keine Sprünge', sondern 'die Fläche selbst entscheidet, nicht eine geratene Pixelzahl.'"

Auch Textumfluss gehört zum Werkzeugkasten: shape-outside lässt den Fließtext um die tatsächliche Kreisform herum laufen, nicht nur um die rechteckige Bounding-Box (.ncss-float-shape-circle für die Form + .ncss-img- cover fürs Zuschneiden auf ein Quadrat davor). Kombiniert mit Silbentrennung (.ncss-hyphenate) bleiben auch schmale Spalten neben einem Bild gut lesbar, statt in unschöne Lücken oder einzelne, sehr lange Wörter am Zeilenende zu zerfallen. Donaudampfschifffahrts­gesellschaftskapitän ist ein beliebtes Test-Wort dafür - ohne Silbentrennung sprengt es schmale Spalten zuverlässig, mit Silbentrennung fügt es sich ein. Unterhalb von 28rem Containerbreite floatet dieses Bild nicht mehr - dank .ncss-center-narrow steht es dann zentriert statt linksbündig da. Bewusst OHNE sichtbare <figcaption> hier: eine zweite Zeile Text unter dem Bild würde die Box höher als das Bild selbst machen, shape-outside: circle(50%) bezieht sich aber auf die GESAMTE Box - der Textfluss würde dann um eine Ellipse statt einen Kreis laufen. Die Bildbeschreibung steckt hier stattdessen im alt-Attribut.

Bild Textumfluss funktioniert natürlich auch nach rechts (ncss-float-end) und ganz ohne shape-outside - für ein schlicht eckiges Bild reicht das float allein, die rechteckige Bounding Box ist ja bereits die Zielform. Tabellarische Ziffern (1234567890) sorgen dafür, dass nebeneinander stehende Zahlen - wie die "Fakten"-Kacheln oben - nicht "wackeln", weil jede Ziffer exakt gleich breit ist, unabhängig vom Wert. Dieses zweite Bild trägt stattdessen .ncss-full-narrow: unterhalb von 28rem Containerbreite wächst es auf die volle Breite, statt schmal und linksbündig zu bleiben.

Am Ende bleibt der Punkt, um den es bei NativeCSS die ganze Zeit geht: möglichst viel davon ist natives CSS, das der Browser ohnehin schon kann - Design-Arbeit besteht dann vor allem darin, die richtigen Bausteine an der richtigen Stelle zusammenzustecken, statt sie neu zu erfinden.