Tag: CSS

1. Relative Color Syntax praktisch nutzen: Farbtöne aus CSS-Variablen ableiten

   10.05.2026

   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.

   Read more

2. Hyvä Theme CSS Architektur: Skalierbare Muster für Tailwind Komponenten

   27.04.2026

   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.

   Read more

3. CSS Grid Subgrid — verschachtelte Layouts ausrichten

   26.04.2026

   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.

   Read more

4. line-clamp Muster für Textkürzung: Mehrzeilige Ellipsis ohne JavaScript

   21.04.2026

   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.

   Read more

5. CSS clamp() für Fluid Typography — flüssige Schriftgrößen ohne Breakpoints

   06.04.2026

   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.

   Read more

6. focus-within vs. focus-visible: Der Vergleich

   28.03.2026

   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.

   Read more

7. CSS shape-outside — Texte um Formen fließen lassen

   24.03.2026

   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.

   Read more

8. CSS prefers-reduced-motion — Animationen barrierefrei gestalten

   20.03.2026

   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.

   Read more

9. Font Loading Strategien: FOIT, FOUT und Subsetting

   08.03.2026

   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.

   Read more

10. Attribut-Selektoren: Fortgeschrittene Muster

    25.02.2026

    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.

    Read more