HTML & CSS-Snippets
Alle Snippets für HTML & CSS — copy-&-paste-fertig, erklärt und aus der Praxis.
CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet
Mit CSS Custom Properties definierst du Farben an einer Stelle und nutzt sie überall. Der Clou: Für den Dark Mode überschreibst du nur die Variablen – nicht jede einzelne Regel. Ich zeige beides, inklusive automatischer System-Erkennung.
Etwas mittig zentrieren mit Flexbox – horizontal und vertikal in drei Zeilen
Das alte „wie zentriere ich einen Div vertikal?" ist mit Flexbox endgültig gelöst. Drei Zeilen genügen. Ich zeige dir das Grundmuster, den Unterschied zwischen justify-content und align-items und warum gap besser ist als margin.
Der Eltern-Selektor ist da – bedingtes Styling mit CSS :has()
Jahrelang gab es in CSS keinen Weg, ein Element abhängig von seinem Inhalt zu stylen. Mit :has() geht das endlich – ganz ohne JavaScript. Drei Beispiele, die ich ständig brauche.
Fluid Typography mit CSS clamp() – Schrift, die ohne Media Queries mitwächst
Statt an drei Breakpoints feste Schriftgrößen zu setzen, lässt du sie mit clamp() flüssig zwischen einem Minimum und Maximum skalieren. Eine Zeile CSS ersetzt einen Stapel Media Queries.
Responsives Karten-Grid ganz ohne Media Queries
Mit repeat(auto-fill, minmax()) baust du ein Grid, das die Spaltenzahl selbst an die Breite anpasst. Ein einziger Deklarationsblock ersetzt einen Stapel Media Queries.