HTML & CSS-Snippets
Alle Snippets für HTML & CSS — copy-&-paste-fertig, erklärt und aus der Praxis.
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.
Überschriften ohne Schusterjungen: text-wrap: balance
Eine Überschrift, bei der das letzte Wort allein in der zweiten Zeile steht, sieht billig aus. Zwei CSS-Zeilen räumen das auf — ohne JavaScript und ohne manuelle Zeilenumbrüche.
subgrid – Karten, deren Zeilen wirklich auf einer Linie liegen
Drei Karten nebeneinander, jede mit Titel, Text und Knopf – und alles steht leicht versetzt, weil ein Titel zweizeilig ist. Mit subgrid teilen sich die Karten die Zeilen des Eltern-Grids, und alles sitzt bündig. Ohne feste Höhen, ohne JavaScript.
accent-color – Checkboxen und Regler in deiner Markenfarbe, in einer Zeile
Checkboxen und Radiobuttons waren jahrelang der Grund, warum Leute sie mit appearance: none nachgebaut haben – und dabei die Tastaturbedienung verloren. Eine einzige CSS-Eigenschaft macht das überflüssig.
Verschachteltes CSS – ganz ohne Sass, direkt im Browser
Das Feature, für das die meisten Leute überhaupt erst einen CSS-Präprozessor eingerichtet haben, kann der Browser inzwischen selbst. Kein Build-Schritt, keine Abhängigkeit – nur ein paar Regeln, die man kennen sollte.
Text nach drei Zeilen abschneiden – line-clamp statt JavaScript
Kartenlisten sehen nur dann ordentlich aus, wenn alle Vorschautexte gleich hoch sind. Das serverseitig auf 120 Zeichen zu kürzen geht schief, sobald die Karte schmaler wird – CSS kann das seit Jahren selbst.
:focus-visible – der Fokusrahmen, den nur Tastaturnutzer sehen
outline: none ist der meistkopierte und schädlichste CSS-Schnipsel überhaupt: Danach kann niemand mehr per Tastatur navigieren. :focus-visible löst genau das Problem, das man damit lösen wollte – ohne den Schaden.
grid-template-areas – ein Layout, das man im Code sehen kann
Statt Zeilen- und Spaltennummern zu zählen, malst du dein Layout als kleine ASCII-Zeichnung ins CSS. Auf dem Handy schreibst du die Zeichnung einfach anders – dieselben Bausteine, andere Anordnung, kein einziger geänderter HTML-Knoten.
Notch und Home-Indikator umschiffen – env(safe-area-inset-*) in CSS
Dein Button klebt am unteren Rand und liegt auf dem iPhone genau unter dem Home-Indikator? Das löst CSS von sich aus – mit env(safe-area-inset-*) und einem Meta-Tag, das fast immer vergessen wird. Ich zeige das Muster, den häufigsten Fehler und wie du den Wert sogar im Canvas nutzt.
Bilder ohne Verzerren einpassen mit object-fit
Wenn ein Bild in einen festen Rahmen soll, wird es schnell gestaucht oder verzerrt. object-fit löst das: Das Bild füllt den Rahmen oder passt komplett hinein – ohne die Proportionen zu ruinieren. Mit object-position steuerst du den Ausschnitt.