Seite 2 - CSS

grid-auto-flow: dense füllt Lücken in einem CSS Grid automatisch, indem es bei jeder Platzierung rückwärts sucht. Das erzeugt ein dichtes, lückenloses Layout, kann dabei aber die visuelle Reihenfolge der Elemente deutlich von ihrer Reihenfolge im Markup trennen, mit direkten Folgen für Tastatur-Navigation und Screenreader.

Textfluss um geometrische Formen war im Webdesign lange ein unerfüllter Wunsch. CSS shape-outside macht es möglich: Texte fließen um Kreise, Ellipsen und Polygone — float-basiert, ohne JavaScript, direkt in CSS. shape-margin, shape-image-threshold und clip-path vervollständigen das Werkzeug für editoriales Webdesign.

Für Menschen mit vestibulären Störungen, Migräne oder Epilepsie können exzessive Animationen auf Webseiten physische Beschwerden auslösen. Die CSS Media Query prefers-reduced-motion gibt Entwicklern die Möglichkeit, Animationen systemweit zu respektieren – und WCAG 2.2 macht das zur Pflicht. Dieser Artikel erklärt die Hintergründe, die richtigen Implementierungsstrategien und häufige Fehler.

Ein falsch konfiguriertes Font Loading zeigt entweder unsichtbaren Text während des Ladens oder einen sichtbaren Schriftwechsel samt Layout-Sprung, sobald die Web-Font eintrifft. Mit der richtigen Kombination aus font-display, Preload und Subsetting lässt sich beides vermeiden, ohne auf individuelle Typografie zu verzichten.

Scrollt ein Nutzer innerhalb eines Modals oder Dropdowns bis an dessen Rand, scrollt der Browser standardmäßig einfach in der dahinterliegenden Seite weiter, ein Effekt namens Scroll-Chaining. overscroll-behavior unterbricht diese Weitergabe gezielt an der Grenze eines Containers und verhindert außerdem das versehentliche Auslösen von Pull-to-Refresh auf mobilen Geräten, komplett ohne preventDefault-Workarounds in JavaScript.

Attribut-Selektoren werden meist auf [class] und [id] reduziert, dabei stecken in der Spezifikation Präfix-, Suffix- und Substring-Matching, ein case-insensitive Flag und die Möglichkeit, data-Attribute als vollwertige Styling-Schnittstelle zu nutzen. Diese Rezeptsammlung zeigt, wie viel deklarative Logik allein im Selektor steckt.

Wer den has-Selektor nur als eltern-selektierendes Werkzeug kennt, nutzt einen Bruchteil seines Potenzials. Diese Sammlung zeigt konkrete Rezepte für Formularvalidierung, leere Zustände, Quantity Queries und Theme-Umschaltung, die zuvor zwingend JavaScript brauchten und jetzt reines CSS sind.

Die neue CSS-Eigenschaft field-sizing macht die bewährten JavaScript-Tricks für automatisch wachsende Textareas überflüssig. Mit field-sizing: content passt sich ein Formularfeld ab der ersten Eingabe an seinen Inhalt an — nativ im Browser, ohne Event-Listener und ohne Layout-Hacks.

CSS Pseudo-Elemente sind eine der mächtigsten, aber am häufigsten oberflächlich genutzten Funktionen von CSS. ::before und ::after mit content und counter, die modernen Pseudo-Elemente ::marker, ::selection und ::first-line – dieser Artikel zeigt, was wirklich möglich ist und welche Tricks in modernem CSS funktionieren.

CSS revert-layer ist das Schlüsselwort, das die Layer-basierte Kaskade von CSS vollständig nutzbar macht. Es gibt einen Eigenschaftswert auf den Stand zurück, den der vorherige Layer definiert hätte – ohne Specificities zu überschreiben, ohne !important und ohne alle Properties einzeln zu resetten. Zusammen mit @layer entsteht eine skalierbare CSS-Architektur mit präziser Kaskadenkontrolle.