HTML & CSS-Snippets
Alle Snippets für HTML & CSS — copy-&-paste-fertig, erklärt und aus der Praxis.
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.
color-mix() – Hover- und Dark-Mode-Farben ausrechnen lassen, statt sie zu pflegen
Für jede Markenfarbe eine hellere, eine dunklere und eine transparente Variante von Hand zu pflegen, ist Fleißarbeit mit Fehlerquote. color-mix() mischt sie im Browser – aus genau einer Quellfarbe.
Ankerlinks unter einem klebenden Header – scroll-margin-top rettet die Überschrift
Du klickst im Inhaltsverzeichnis auf einen Abschnitt – und der klebende Header verdeckt genau die Überschrift, zu der du wolltest. Zwei CSS-Zeilen lösen das, ganz ohne JavaScript und ohne unsichtbare Platzhalter-Elemente.
prefers-reduced-motion – Animationen, die niemandem übel werden
Manche Menschen bekommen von bewegten Oberflächen Schwindel oder Übelkeit. Ihr Betriebssystem weiß das längst – mit einer Media Query fragst du es einfach ab und lieferst dieselbe Seite ohne Bewegung aus.
@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.