Seite 7 - CSS

CSS

AI generated

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

Maxim Mironjuk - Juli 02, 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.

CSS

AI generated

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

Maxim Mironjuk - Juni 29, 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.

CSS

AI generated

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

Maxim Mironjuk - Juni 27, 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.

CSS

AI generated

CSS Counter – automatische Nummerierung ohne JavaScript

Maxim Mironjuk - Juni 24, 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.

CSS

AI generated

nth-child: Fortgeschrittene Formeln

Maxim Mironjuk - Juni 22, 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.

CSS

AI generated

CSS Grid vs. Flexbox — wann welches Layout-System

Maxim Mironjuk - Juni 18, 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.

CSS

AI generated

CSS @property — typisierte Custom Properties animieren und validieren

Maxim Mironjuk - Juni 07, 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.

CSS Web Performance

AI generated

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

Maxim Mironjuk - Juni 03, 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.

CSS

AI generated

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

Maxim Mironjuk - Juni 03, 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.

CSS

AI generated

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

Maxim Mironjuk - Juni 02, 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.