Tag: CSS

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

   04.02.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.

   Read more

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

   13.01.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.

   Read more

3. CSS Masonry Layout Draft – Pinterest-Layouts nativ im Browser

   13.01.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.

   Read more

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

   09.01.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.

   Read more

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

   06.01.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.

   Read more

6. CSS Custom Highlights API – Text-Markierungen programmatisch stylen

   29.12.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.

   Read more

7. CSS Anchor Positioning — Tooltips und Overlays ohne JavaScript

   18.12.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.

   Read more

8. Custom Properties als API Vertrag für Komponenten

   11.12.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.

   Read more

9. accent-color: Formularelemente ohne JavaScript einfärben

   08.12.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.

   Read more

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

    05.12.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.

    Read more