CSS: Anleitungen und Praxiswissen | Seite 6 | mironsoft Blog
CSS
-
04.12.2025
Jahrelang war eine Transition von oder zu einem auto-Wert in CSS schlicht nicht möglich, weil der Browser keinen numerischen Zwischenwert für auto berechnen konnte. Mit calc-size() und der Eigenschaft interpolate-size ändert sich das grundlegend: Der Browser darf jetzt selbst einen numerischen Anfangs- oder Endwert für auto ermitteln und dazwischen sauber animieren, ganz ohne JavaScript-Messungen oder feste Pixelwerte.
-
29.11.2025
env() ist den meisten nur über die vier Safe-Area-Insets bekannt, mit denen sich Layouts an Notch oder Dynamic Island anpassen, dabei ist es ein allgemeiner Mechanismus für Environment-Variablen, die Browser oder Betriebssystem bereitstellen. Hier steht, was darüber hinaus existiert, einschließlich autoren-definierter Variablen, Viewport Segments für faltbare Geräte, und eine klare Abgrenzung zu Custom Properties.
-
21.11.2025
Scroll Snap bringt das Verhalten klassischer Karussell-Bibliotheken direkt in den Browser: Der Nutzer scrollt frei, aber der Container rastet an definierten Positionen ein, sauber und ruckelfrei. Wer scroll-snap-type und scroll-snap-align richtig kombiniert, spart eine komplette JavaScript-Abhaengigkeit und bekommt dabei Touch-Gesten, Tastatursteuerung und Barrierefreiheit quasi geschenkt.
-
21.11.2025
Filter Utilities wie blur, brightness und grayscale wirken auf den ersten Blick wie kosmetische Spielerei, lösen in Tailwind aber ein technisch anspruchsvolles Problem: mehrere Filter-Funktionen werden zu einer einzigen CSS-Deklaration komponiert. Wer versteht, wie diese Komposition funktioniert und wo Backdrop-Filter an Grenzen stoßen, baut Effekte, die auch auf Mobilgeräten flüssig bleiben.
-
19.11.2025
Das CSS Multi-Column Layout ist eines der am meisten unterschätzten Layout-Module im modernen CSS. Mit column-count, column-width, column-gap und break-inside lassen sich Zeitungslayouts, Gallery-Stacking und Masonry-ähnliche Strukturen vollständig ohne JavaScript realisieren – direkt im Browser, mit nativer Unterstützung in allen modernen Engines.
-
12.11.2025
Echte Feder-Physik in Animationen war lange Domäne von JavaScript-Bibliotheken wie Framer Motion oder React Spring. Die CSS-Funktion linear() erlaubt jetzt, beliebig komplexe Easing-Kurven, inklusive Overshoot und Bounce, direkt als Stützpunkt-Liste im Stylesheet zu definieren, ganz ohne Laufzeit-JavaScript.
-
12.11.2025
Während oklch() und lab() eigene, in sich geschlossene Farbmodelle beschreiben, öffnet die generische color()-Funktion CSS für ein ganzes Set benannter Farbräume, darunter display-p3, a98-rgb, prophoto-rgb und rec2020. Wer Produktbilder oder Markenfarben auf modernen Displays mit größerem Farbumfang originalgetreu darstellen will, kommt an dieser Funktion kaum vorbei, muss aber auch einen sauberen Fallback für ältere Bildschirme und Browser mitdenken.
-
11.11.2025
@custom-media erlaubt es, eine Media-Query-Bedingung einmal zu benennen und danach überall im Stylesheet wiederzuverwenden, statt dieselbe Breitenangabe an zwanzig Stellen zu wiederholen. Bisher übernimmt PostCSS diese Übersetzung beim Build, doch die Media Queries Level 5 Spezifikation bringt genau diese Fähigkeit direkt in den Browser.
-
08.11.2025
Numerische Grid Linien wie Linie 3 oder Linie minus 2 sind für den Browser eindeutig, für Menschen aber schwer zu merken. Benannte Grid Linien und grid-template-areas übersetzen dasselbe Raster in aussagekräftige Bezeichnungen und ASCII Diagramme, die im Code selbst dokumentieren, was auf dem Bildschirm passiert.
-
05.11.2025
Eine Produktgalerie rein mit CSS zu lösen klingt nach einem Trick, ist aber ein belastbares Muster: Scroll Snap Container, das Checkbox Hack Prinzip und die :target Pseudoklasse bilden Thumbnail-Navigation, Karussell und Vollbild-Ansicht ab, ohne dass ein einziges Kilobyte JavaScript geladen werden muss.