Moderne CSS-Techniken
Custom Properties, Layout-Features und Tooling für sauberes CSS
-
display animieren mit transition-behavior und @starting-style
Wie du Übergänge von display: none zu display: block animierst — ohne JavaScript-Workarounds und ohne Kompromisse bei der Tastatur-Navigation.
-
Besseres (S)CSS mit Stylelint
Wie Stylelint SCSS- und CSS-Dateien auf definierte Standards prüft und automatisch korrigiert — mit drei Praxisbeispielen und fertiger Beispiel-Konfiguration.
-
:has(), Subgrid und Responsive Video
Drei Frontend-Neuerungen im Praxiseinsatz: die :has()-Pseudoklasse statt Hilfsklassen, Subgrid für ausgerichtete Produktlisten und echte Responsive Videos.
-
Dark Mode: Mythen und Umsetzung mit Custom Properties
Warum Dark Mode weder automatisch die Augen schont noch immer Akku spart — und warum sich die Umsetzung mit Custom Properties trotzdem lohnt.
-
Ausgewogene Überschriften mit text-wrap: balance
Wie text-wrap: balance unglückliche Zeilenumbrüche in Überschriften verhindert — ohne manuelle Umbrüche oder geschützte Leerzeichen.
-
CSS Scroll Snap: Neue Lösungen für Smartphones und Tablets
Wie du mit Scroll Snap horizontale Scrollbereiche baust, in denen Elemente sauber einrasten — ganz ohne Javascript-Slider.
-
Einführung in Custom Properties
Wie CSS-Variablen funktionieren, was sie gegenüber Sass-Variablen können — und wo sie an ihre Grenzen stoßen.
-
Wenn der Text zu lang ist: object-fit und line-clamp
Wie du Hero- und Card-Elemente so stabil baust, dass auch lange Texte das Layout nicht zerschießen — mit object-fit: cover und line-clamp.
-
display: contents — wenn sich ein Container unsichtbar machen soll
Wie du mit display: contents die Reihenfolge von Logo und Menüpunkten frei bestimmst — ohne Extra-Markup und ohne mehrere Navigationsmodule.
-
Popover-API und color-mix()
Zwei moderne Frontend-Features: das Popover-Attribut für nicht-blockierende Overlays und color-mix() für Farbabstufungen mit Custom Properties.