Tag: CSS

1. ITCSS: Skalierbare CSS Architektur für große Projekte

   21.05.2025

   ITCSS ordnet ein Stylesheet nicht nach Dateityp oder Komponente, sondern nach Spezifität und Reichweite jeder Regel. Diese CSS Architektur macht Konflikte zwischen globalen Grundregeln und spezifischen Überschreibungen vorhersagbar, statt sie dem Zufall der Import-Reihenfolge zu überlassen, und bleibt auch bei Dutzenden Entwicklern über Jahre wartbar.

   Read more

2. CSS position:sticky für Sidebar-Layouts — top, bottom, z-index und iOS-Bugs

   19.05.2025

   position:sticky ist konzeptuell einfach — in der Praxis versagt es jedoch aus überraschend vielen Gründen. Dieser Artikel erklärt jeden einzelnen Fallstrick: overflow-Fallen im Elternelement, fehlende Schwellenwert-Properties, z-index in Stacking Contexts und warum iOS-Safari sich anders verhält.

   Read more

3. animation-composition verstehen: Additive Animationen ohne Überschreiben

   18.05.2025

   Zwei Animationen, die beide transform verwenden, überschreiben sich standardmäßig gegenseitig. animation-composition mit den Werten add und accumulate löst genau dieses Problem und macht es möglich, Hover-Effekt, Scroll-Animation und Idle-Bewegung gleichzeitig auf derselben Eigenschaft laufen zu lassen, ohne dass eine Animation die andere verschluckt.

   Read more

4. CSS Logical Properties für RTL-Layouts und Internationalisierung

   06.05.2025

   Wer Layouts mit margin-left, padding-right und border-top schreibt, baut physische Richtungsabhängigkeiten in seinen Code ein, die bei RTL-Sprachen und vertikalen Schreibmodi versagen. CSS Logical Properties lösen dieses Problem fundamental: Ein einziges Stylesheet funktioniert für Arabisch, Hebräisch, Japanisch und Deutsch gleichermaßen.

   Read more

5. Critical CSS Extraktion automatisieren

   04.05.2025

   Von Hand gepflegtes Critical CSS veraltet bei jeder Layout-Änderung sofort und wird zur stillen Fehlerquelle im Frontend. Wer die Critical CSS Extraktion in die Build-Pipeline integriert, bekommt bei jedem Deployment automatisch aktuelles, korrektes CSS für den sichtbaren Bereich, ohne dass ein Entwickler manuell eingreifen muss.

   Read more

6. Sticky Checkout Summary mit CSS: Die Warenkorb Übersicht die mitscrollt

   13.04.2025

   Eine Sticky Checkout Summary klingt nach einer einzigen CSS Zeile, doch position sticky bricht im Checkout regelmäßig an Overflow-Containern, falschen Höhenberechnungen und Stacking-Context-Fallen. Mit dvh Einheiten, einem sauberen Scroll Container und der richtigen Grid-Struktur bleibt die Warenkorb Übersicht zuverlässig sichtbar, während der Nutzer durch die Checkout-Schritte scrollt.

   Read more

7. prefers-color-scheme im Detail: Dark Mode korrekt implementieren

   11.04.2025

   prefers-color-scheme ist mehr als eine Media Query für Dunkel und Hell. Die color-scheme Property, ein sauberer Nutzer-Override und die richtige Reihenfolge beim ersten Render entscheiden darüber, ob Dark Mode nahtlos wirkt oder mit einem sichtbaren Aufblitzen des falschen Themes startet.

   Read more

8. Holy Grail Layout mit modernem CSS: Grid statt Floats und Tabellen

   09.04.2025

   Das Holy Grail Layout aus Header, zwei Randspalten, Hauptbereich und Footer galt lange als eines der schwierigsten CSS Probleme überhaupt. Mit CSS Grid, template-areas, Gap und Subgrid lässt sich dasselbe Layout heute in wenigen, klar lesbaren Zeilen bauen, ganz ohne Float-Hacks, ohne Tabellen und ohne fragile absolute Positionierung.

   Read more

9. Responsives Typografie Skalensystem aufbauen: Von der Modularen Skala zu CSS Custom Properties

   07.04.2025

   Ein Typografie Skalensystem definiert alle Schriftgrößen eines Projekts über ein festes mathematisches Verhältnis statt über zufällig gewählte Pixelwerte. Kombiniert mit CSS Custom Properties und clamp() entsteht daraus ein einziges System aus semantischen Tokens, das responsive Größen automatisch berechnet und über das gesamte Designsystem konsistent bleibt.

   Read more

10. CSS View Transitions API — seitenübergreifende Übergänge mit view-transition-name

    27.03.2025

    Die View Transitions API bringt das, was früher nur SPAs mit aufwendigen Frameworks erreichten, als native Browser-Funktion: nahtlose Animationen beim Seitenwechsel — mit view-transition-name für shared elements, CSS-Pseudoelementen für volle Stilkontrolle und Cross-Document-Unterstützung für Multi-Page-Apps.

    Read more