CSS

Die Relative Color Syntax erlaubt es, aus einer einzigen Markenfarbe im Browser eine vollständige Palette zu berechnen, statt Hover, Active und Rahmenfarben als eigene Variablen zu pflegen. Mit dem Schlüsselwort from, Farbraum-Kanälen und calc() entstehen wartbare Farbsysteme direkt in nativem CSS, ganz ohne Sass oder Build-Schritt.

Ohne klare Hyvä Theme CSS Architektur wächst jedes Magento Frontend zu einer Sammlung wiederholter Utility Ketten heran, die niemand mehr sauber pflegen kann. Cascade Layers, Design Tokens und modulare CSS Partials geben der Architektur eine Struktur, die mit dem Shop mitwächst statt gegen ihn zu arbeiten.

Verschachtelte Grid-Elemente an den Tracks des Eltern-Grids ausrichten — ohne JavaScript, ohne Workarounds. CSS Grid Subgrid löst das jahrelang offene Ausrichtungsproblem in Karten-Layouts, Formularen und Multi-Column-Designs auf elegante, deklarative Weise.

line-clamp begrenzt Textblöcke auf eine feste Zeilenanzahl und ersetzt überschüssigen Inhalt durch eine Ellipsis, ganz ohne JavaScript-Messung der Textbreite. Für Karten, Produktlisten und Vorschau-Snippets ist das der zuverlässigste Weg, konsistente Layouts zu bauen, solange Fallbacks und Zugänglichkeit von Anfang an mitgedacht werden.

Mit CSS clamp() skalieren Schriftgrößen und Abstände kontinuierlich zwischen Minimum und Maximum — ohne einen einzigen Media Query. Die mathematische Formel dahinter ist lernbar in zehn Minuten und ersetzt ganze Breakpoint-Systeme durch eine einzige, ausdrucksstarke Deklaration.

focus-within und focus-visible klingen ähnlich, lösen aber grundverschiedene Probleme. Der eine reagiert auf Fokus irgendwo innerhalb eines Containers, der andere unterscheidet zwischen Tastatur- und Mausinteraktion. Wer beide verwechselt, baut entweder unruhige Fokusringe oder unsichtbare Tastaturnavigation.

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.

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.