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.

CSS konnte über Jahrzehnte kein Eltern-Element anhand des Zustands eines seiner Kinder auswählen. Der :has()-Selektor schließt genau diese Lücke und macht Formular-Wrapper, Fieldsets und ganze Formularabschnitte reaktiv auf :invalid, :user-invalid und :checked, komplett ohne eine einzige Zeile JavaScript.

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.

content bei ::before und ::after wird oft nur fuer leere dekorative Elemente genutzt, kann aber deutlich mehr: attr() liest HTML-Attribute direkt aus, counter() nummeriert Listen und Kapitel automatisch, und content: url() bindet Bild-Icons ein, ganz ohne zusaetzliches Markup. Wer diese Moeglichkeiten kennt, spart HTML-Elemente, muss dabei aber die Zugaenglichkeits-Grenzen von generiertem Inhalt genau verstehen.

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.

Mit der Funktion light-dark() lässt sich ein Hell- und ein Dunkelmodus-Farbwert in einer einzigen Deklaration angeben, statt zwei getrennte prefers-color-scheme-Blöcke zu pflegen. Der Browser wählt automatisch anhand des aktuell aktiven color-scheme, welcher der beiden Werte zum Einsatz kommt, sowohl bei System-Präferenz als auch bei einem manuellen Umschalter, der die Eigenschaft überschreibt.

Die Standard Spacing Skala von Tailwind deckt viele Projekte gut ab, stößt aber bei eigenen Designsystemen schnell an Grenzen. Wer die Tailwind Spacing Skala mit @theme in Tailwind v4 gezielt erweitert, statt beliebige Pixelwerte einzustreuen, bekommt ein Abstandssystem, das über Buttons, Karten und ganze Seiten hinweg konsistent bleibt.

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.