Defensives CSS

Eine Sammlung von Snippets, um bestimmte CSS-Probleme gar nicht erst entstehen zu lassen

• Zeilenumbruch bei Flexbox → flex-wrap: wrap;

• Mehr Freiraum geben → margin-right: 1rem;

• Langer Inhalt, der nicht umbrechen soll → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Verhindern, dass Bilder gestreckt/verzerrt werden → object-fit: cover;

• Scroll-Verkettung blockieren → overscroll-behavior-y: contain;

• Fallback-Wert für CSS-Variablen setzen → max-width: calc(100% - var(--actions-width, 70px));

• Feste Höhe → lieber min-height statt height verwenden

• Feste Breite → lieber min-width statt width verwenden

• Hintergrundwiederholung entfernen → background-repeat: no-repeat;

• Vertikale Media Queries nutzen → bei Dingen wie position:sticky nur ab einer bestimmten Höhe anwenden: @media (min-height:600px) {}

• Bei der Anordnung von Flexbox-Items statt justify-content: space-between; lieber gap: 1rem; verwenden

• Wenn weißer Text über einem Bild liegt, auf fehlgeschlagenes Laden des Bildes reagieren → background-color: grey; verwenden

• Vorsicht bei festen Werten in CSS Grid → immer Media Queries verwenden

• Scrollbar nur bei Bedarf anzeigen → overflow-y: auto;

• Layoutverschiebungen beim Erscheinen der Scrollbar vermeiden → scrollbar-gutter: stable;

• Minimale Inhaltsgröße in Flexbox festlegen → min-width: 0; (der Standardwert ist auto, wodurch Overflow entsteht)

• Minimale Inhaltsgröße in CSS Grid festlegen → minmax() verwenden

• Bei CSS Grid: Auto Fit vs. Auto Fill → in den meisten Fällen ist auto-fill besser

• Maximale Bildbreite festlegen → max-width: 100%

• Wenn auf einem Child eines Grid-Containers position: sticky verwendet wird, align-self: start anwenden

• Gruppenselektoren funktionieren in anderen Browsern möglicherweise nicht, daher jeweils getrennt angeben