Defensives CSS

<p>Eine Sammlung von Snippets, um bestimmte CSS-Probleme gar nicht erst entstehen zu lassen<br /> - Zeilenumbruch bei Flexbox → `flex-wrap: wrap;`<br /> - Mehr Freiraum geben → `margin-right: 1rem;`<br /> - Langer Inhalt, der nicht umbrechen soll → `text-overflow: ellipsis; white-space:nowrap; overflow: hidden;`<br /> - Verhindern, dass Bilder gestreckt/verzerrt werden → `object-fit: cover;`<br /> - Scroll-Verkettung blockieren → `overscroll-behavior-y: contain;` <br /> - Fallback-Wert für CSS-Variablen setzen → `max-width: calc(100% - var(--actions-width, 70px));`<br /> - Feste Höhe → lieber `min-height` statt `height` verwenden <br /> - Feste Breite → lieber `min-width` statt `width` verwenden <br /> - Hintergrundwiederholung entfernen → `background-repeat: no-repeat;`<br /> - Vertikale Media Queries nutzen → bei Dingen wie `position:sticky` nur ab einer bestimmten Höhe anwenden: `@media (min-height:600px) {}`<br /> - Bei der Anordnung von Flexbox-Items statt `justify-content: space-between;` lieber `gap: 1rem;` verwenden<br /> - Wenn weißer Text über einem Bild liegt, auf fehlgeschlagenes Laden des Bildes reagieren → `background-color: grey;` verwenden <br /> - Vorsicht bei festen Werten in CSS Grid → immer Media Queries verwenden <br /> - Scrollbar nur bei Bedarf anzeigen → `overflow-y: auto;` <br /> - Layoutverschiebungen beim Erscheinen der Scrollbar vermeiden → `scrollbar-gutter: stable;` <br /> - Minimale Inhaltsgröße in Flexbox festlegen → `min-width: 0;` (der Standardwert ist `auto`, wodurch Overflow entsteht)<br /> - Minimale Inhaltsgröße in CSS Grid festlegen → `minmax()` verwenden <br /> - Bei CSS Grid: Auto Fit vs. Auto Fill → in den meisten Fällen ist `auto-fill` besser <br /> - Maximale Bildbreite festlegen → `max-width: 100%` <br /> - Wenn auf einem Child eines Grid-Containers `position: sticky` verwendet wird, `align-self: start` anwenden <br /> - Gruppenselektoren funktionieren in anderen Browsern möglicherweise nicht, daher jeweils getrennt angeben</p>