CSS: Anleitungen und Praxiswissen | Seite 4 | mironsoft Blog
CSS
-
21.01.2026
mask-image maskiert ein Element per Gradient oder Bilddatei mit stufenloser Transparenz, statt es wie clip-path nur hart geometrisch zu beschneiden. Das macht die Eigenschaft zum richtigen Werkzeug für ausfransende Produktbilder, organische Hero-Flächen und ein wiederverwendbares Icon-System, das ganz ohne zusätzliche SVG-Exporte auskommt.
-
17.01.2026
Ein manuell gepflegter @theme-Block gerät außer Kontrolle, sobald dieselben Farbwerte auch für native Apps, Figma oder ein zweites Frontend gebraucht werden. Ein Theme-Generator liest eine einzige JSON-Token-Datei als Single Source of Truth und erzeugt daraus automatisch den Tailwind CSS v4 @theme-Block, konsistent über alle Plattformen hinweg.
-
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.
-
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.
-
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.
-
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.
-
04.01.2026
Eine vertikale Timeline Komponente zeigt Ereignisse chronologisch entlang einer senkrechten Linie und aktiviert Etappen beim Scrollen. Mit CSS Grid für das Layout und Alpine.js x-intersect für Scroll-Reveal Animationen entsteht eine flexible Timeline Komponente, ohne eine dedizierte Timeline Bibliothek einzubinden.
-
01.01.2026
Eine lange Tabelle, die beim Drucken mitten in einer Zeile umbricht, ist einer der sichtbarsten CSS-Fehler auf Rechnungen und Bestellbestaetigungen. Mit break-inside: avoid fuer Zeilen und einem korrekt eingesetzten thead als wiederholtem Kopf lassen sich Seitenumbrueche gezielt so steuern, dass jede Seite fuer sich lesbar bleibt, ganz ohne JavaScript oder serverseitiges PDF-Rendering.
-
29.12.2025
Ein eingebundenes Payment-Widget oder Chat-Widget bringt fast immer eigenes CSS mit, das sich nicht anfassen lässt und trotzdem nicht mit dem eigenen Design kollidieren soll. Cascade Layers lösen dieses Problem strukturell: Fremdes CSS landet in einer eigenen Kaskadenschicht unterhalb der eigenen Layer und verliert damit garantiert jeden Spezifitäts-Wettlauf, ganz ohne dass eine einzige fremde Regel angefasst werden muss.
-
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.