HTML & CSS-Snippets
Alle Snippets für HTML & CSS — copy-&-paste-fertig, erklärt und aus der Praxis.
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.
Slider und Karussell mit CSS scroll-snap – ohne Bibliothek
Ein wischbares Karussell, das sauber an jeder Karte einrastet, brauchst du nicht per JavaScript zu bauen. Mit scroll-snap sagst du dem Browser, wo der Scroll stehenbleiben soll – flüssig, mit Touch und Trackpad.
aspect-ratio in CSS – Seitenverhältnisse ohne Padding-Trick
Früher brauchte man den berüchtigten padding-top-Hack, um ein 16:9-Element zu bauen. Mit aspect-ratio geht das in einer Zeile – für Videos, Vorschaubilder und quadratische Kacheln, die beim Laden nicht springen.
Akkordeon & FAQ ohne JavaScript – <details> und <summary>
Aufklappbare Abschnitte brauchen kein JavaScript. Das HTML-Paar <details>/<summary> bringt das Auf- und Zuklappen von Haus aus mit – barrierefrei und tastaturbedienbar. Ich zeige das Markup, ein sauberes Styling und wie du eine echte Akkordeon-Gruppe baust.
Modale Dialoge ohne Framework – das native <dialog>-Element
Für ein Modal brauchst du kein Bibliotheks-Ballast und keine z-index-Schlacht. Das HTML-Element <dialog> bringt Overlay, Fokus-Falle und Schließen mit Escape von Haus aus mit. Ich zeige dir showModal(), ::backdrop und das saubere Schließen.
Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm
Media Queries fragen die Bildschirmbreite ab. Container Queries fragen, wie breit der Container einer Komponente gerade ist – so passt sich eine Karte in der Sidebar anders an als dieselbe Karte im Hauptbereich. Endlich wirklich wiederverwendbare Bausteine.
Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
position: sticky – ein Header, der beim Scrollen oben kleben bleibt
Für einen mitfahrenden Header brauchst du kein JavaScript. Zwei CSS-Zeilen genügen mit position: sticky. Ich zeige das Muster, erkläre die eine Voraussetzung, die oft vergessen wird, und den häufigsten Grund, warum es „nicht klebt".