Tag: CSS

1. Wide Gamut Farben mit display-p3: kräftigere Farben für moderne Displays

   02.07.2025

   Die meisten heute verkauften Bildschirme können deutlich mehr Farben darstellen, als sRGB jemals kodieren kann. Mit der color() Funktion und display-p3 lassen sich diese zusätzlichen, kräftigeren Farbtöne gezielt in CSS nutzen, mit sauberem Fallback für Geräte, die nur den klassischen Gamut unterstützen.

   Read more

2. CSS :is() und :where() - Selektoren vereinfachen

   29.06.2025

   Lange Selektorlisten mit denselben Deklarationen sind ein Wartungsproblem jedes größeren Stylesheets. CSS :is() und :where() komprimieren solche Listen zu einer einzigen Regel, mit präziser Kontrolle über die Spezifität – und mit einem Fehlertoleranzverhalten, das klassische Komma-Listen nicht haben.

   Read more

3. CSS font-display und Layout Shift — CLS in Core Web Vitals reduzieren

   27.06.2025

   Webfonts sind eine der häufigsten Ursachen für schlechte Core Web Vitals — speziell für hohe CLS-Werte (Cumulative Layout Shift). CSS font-display steuert, wie und wann ein Browser auf geladene Schriften umschaltet. Mit size-adjust lässt sich der visuelle Sprung beim Schriftwechsel auf nahezu null reduzieren.

   Read more

4. CSS Counter – automatische Nummerierung ohne JavaScript

   24.06.2025

   Gestufte Kapitelzähler, verschachtelte Listen mit gemischten Stilen, Custom Markers für Listenelemente — all das leistet reines CSS mit counter-reset, counter-increment und counter(). Wer das System einmal verstanden hat, streicht JavaScript-Zähler dauerhaft aus seinem Werkzeugkasten.

   Read more

5. nth-child: Fortgeschrittene Formeln

   22.06.2025

   Die meisten Entwickler kennen nth-child nur über odd und even, dabei steckt dahinter eine vollständige lineare Formel, die weit komplexere Muster ermöglicht. Diese Sammlung erklärt die An+B Mathematik, nth-last-child und die of S Syntax anhand konkreter Rezepte für Grids, Listen und Paginierung.

   Read more

6. CSS Grid vs. Flexbox — wann welches Layout-System

   18.06.2025

   CSS Grid vs. Flexbox ist keine Glaubensfrage, sondern eine präzise Entscheidung nach Layout-Dimension. Wer die fundamentalen Unterschiede versteht, wählt das richtige Werkzeug für jede Situation — und kombiniert beide Systeme dort, wo es sinnvoll ist.

   Read more

7. CSS @property — typisierte Custom Properties animieren und validieren

   07.06.2025

   CSS Custom Properties sind mächtig, aber untypisiert — der Browser behandelt sie als reine Strings. CSS @property ändert das grundlegend: Mit Typ-Deklaration, Vererbungskontrolle und initialem Wert werden Custom Properties zu vollwertigen, animierbaren CSS-Werten. Gradienten, Farben und Zahlen lassen sich damit interpolieren und mit Transitions verbinden.

   Read more

8. Variable Fonts praktisch einsetzen: eine Schriftdatei für alle Schnitte

   03.06.2025

   Variable Fonts bündeln eine komplette Schriftfamilie mit allen Schnitten in einer einzigen Datei und lassen sich per CSS stufenlos zwischen Gewicht, Breite und optischer Größe interpolieren. Wer die Achsen versteht und sauber einbindet, spart Ladezeit und gewinnt gleichzeitig gestalterische Kontrolle, die statische Schriftschnitte nie geboten haben.

   Read more

9. CSS Selectors Level 4 — :has, :is, :where, :not, :nth-child of

   03.06.2025

   Die Selektoren-Ebene 4 hat das CSS-Werkzeugkasten grundlegend erweitert. CSS Selectors Level 4 bringt :has als lang ersehnten Eltern-Selektor, :is und :where für kompakte Selektorlisten, ein erweitertes :not und eine neue :nth-child of-Syntax. Diese Selektoren ersetzen viele JavaScript-Workarounds und reduzieren CSS-Redundanz erheblich.

   Read more

10. is() und where() zur gezielten Spezifitätskontrolle

    02.06.2025

    is und where werden meist als reine Abkürzung für lange Selektorlisten vorgestellt, dabei liegt ihr größter Wert in der Spezifitätskontrolle. where() erzeugt Null-Spezifität für Resets und Design-Systeme, is() erbt die höchste Spezifität seines Arguments, ohne dass Entwickler jede Kombination manuell ausschreiben müssen.

    Read more