Seite 3 - CSS

CSS

AI generated

@page Regeln praktisch nutzen: Seitenumbrüche, Ränder und Druckformate steuern

Maxim Mironjuk - Februar 04, 2026

Mit @page Regeln steuert CSS direkt, wie groß eine gedruckte Seite ist, welche Ränder sie hat und was in Kopf- und Fußzeile erscheint. Für Rechnungen, Verträge und mehrseitige Reports ersetzen @page Regeln damit einen erheblichen Teil dessen, wofür sonst eine externe PDF-Bibliothek nötig wäre.

CSS Web Performance

AI generated

Scroll-Timeline fortgeschritten: Named Timelines, View-Timeline und animation-range

Maxim Mironjuk - Januar 13, 2026

Ein einfaches Fade-in beim Scrollen kennt inzwischen fast jedes Projekt. Wirklich interessant wird Scroll-Timeline aber erst, wenn mehrere Achsen, benannte Timelines und präzise animation-range-Werte zusammenspielen, um komplexe Erzähl-Layouts ganz ohne Scroll-Event-Listener zu bauen.

CSS

AI generated

CSS Masonry Layout Draft – Pinterest-Layouts nativ im Browser

Maxim Mironjuk - Januar 13, 2026

Masonry-Layouts – Raster, bei denen Items unterschiedlicher Höhe lückenlos gestapelt werden – sind seit Jahren ein JavaScript-Problem. Die CSS Masonry Draft-Spezifikation bringt dieses Verhalten nativ in den Browser: grid-template-rows: masonry verspricht, was bisher nur Bibliotheken wie Masonry.js oder Isotope liefern konnten.

CSS Barrierefreiheit

AI generated

text-wrap: balance vs. pretty im Vergleich: Zeilenumbrüche endlich im Griff

Maxim Mironjuk - Januar 09, 2026

text-wrap balance und text-wrap pretty lösen zwei unterschiedliche Probleme beim Zeilenumbruch: balance verteilt kurze Überschriften gleichmäßig auf alle Zeilen, pretty verhindert einzelne Wörter am Ende von Fließtext-Absätzen. Wer beide Werte gezielt statt austauschbar einsetzt, gewinnt spürbar sauberere Typografie ohne zusätzliches JavaScript.

CSS Barrierefreiheit

AI generated

color-contrast() Funktion für Barrierefreiheit: automatische Kontrastwahl in CSS

Maxim Mironjuk - Januar 06, 2026

Die color-contrast() Funktion aus CSS Color Level 5 lässt den Browser selbst entscheiden, welche von mehreren Textfarben zum jeweiligen Hintergrund den besten WCAG-Kontrast liefert. Das reduziert manuelle Kontrastberechnung und macht dynamisch generierte Hintergründe automatisch barrierefrei lesbar.

CSS

AI generated

CSS Custom Highlights API – Text-Markierungen programmatisch stylen

Maxim Mironjuk - Dezember 29, 2025

Suchbegriffe hervorheben, Diff-Änderungen visualisieren, Spracherkennungs-Treffer markieren — bisher erforderte das alles das Einwickeln von Textknoten in span-Elemente, was den DOM korrumpiert und Barrierefreiheit gefährdet. Die CSS Custom Highlights API löst das Problem elegant: Ranges definieren, registrieren, per ::highlight() stylen — fertig.

CSS

AI generated

CSS Anchor Positioning — Tooltips und Overlays ohne JavaScript

Maxim Mironjuk - Dezember 18, 2025

Tooltips, Dropdowns und kontextbezogene Overlays wurden jahrelang entweder mit JavaScript oder mit fragilen CSS-Hacks gelöst. CSS Anchor Positioning ändert das grundlegend: anchor(), position-anchor und @position-try ermöglichen präzise, kontextbewusste Positionierung direkt im Stylesheet — ohne eine einzige Zeile JavaScript.

CSS Design Patterns

AI generated

Custom Properties als API Vertrag für Komponenten

Maxim Mironjuk - Dezember 11, 2025

Eine Komponente, die Custom Properties nur zufällig statt bewusst exportiert, erzeugt eine unsichtbare Kopplung zwischen Konsumenten und internen Implementierungsdetails. Wer Custom Properties dagegen wie eine echte API behandelt, mit klarem Namensraum, dokumentierten Fallbacks und Versionsstabilität, macht Design Systeme über Teamgrenzen hinweg sicher erweiterbar.

CSS Barrierefreiheit

AI generated

accent-color: Formularelemente ohne JavaScript einfärben

Maxim Mironjuk - Dezember 08, 2025

Checkboxen, Radio-Buttons, Range-Slider und Progress-Bars tragen in jedem Browser eine andere Standardfarbe, meist irgendein Blau, das zur Markenfarbe passt oder eben nicht. Die CSS-Eigenschaft accent-color löst dieses Problem mit einer einzigen Zeile, ohne dass native Tastatursteuerung, Fokus-Ringe oder Screenreader-Semantik verloren gehen.

CSS Design Patterns

AI generated

Sidebar Layouts mit Flexbox: Gap, Order und flex-basis richtig einsetzen

Maxim Mironjuk - Dezember 05, 2025

Ein Sidebar Layout aus fester Seitenspalte und flexiblem Hauptbereich klingt nach einer trivialen Aufgabe, bricht aber regelmäßig bei langen Wörtern, Overflow Inhalten und fehlenden Media Queries. Flexbox liefert mit flex-basis, gap und dem Sidebar Pattern eine Lösung, die ganz ohne Breakpoints automatisch umbricht und die visuelle Reihenfolge unabhängig vom Quellcode steuert.