CSS defensivo

<p>Uma coleção de snippets para evitar problemas específicos de CSS<br /> - Quebra de linha no Flexbox → flex-wrap: wrap;<br /> - Dar espaço sobrando → margin-right: 1rem;<br /> - Conteúdo longo que não deve quebrar linha → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - Evitar que imagens sejam esticadas/distorcidas → object-fit: cover;<br /> - Conter o encadeamento de rolagem → overscroll-behavior-y: contain; <br /> - Definir valor de fallback para variável CSS → max-width: calc(100% - var(--actions-width, 70px));<br /> - Altura fixa → usar min-height em vez de height <br /> - Largura fixa → usar min-width em vez de width <br /> - Remover repetição do fundo → background-repeat: no-repeat;<br /> - Aproveitar media queries verticais → ao usar algo como position:sticky, aplicar só acima de determinada altura vertical @media (min-height:600px) {}<br /> - Ao organizar itens com Flexbox, usar gap: 1rem; em vez de justify-content: space-between;<br /> - Ao colocar texto branco sobre imagem, lidar com falha no carregamento da imagem → usar background-color: grey; <br /> - Cuidado ao usar valores fixos sobre CSS Grid → sempre usar media queries <br /> - Mostrar barra de rolagem só quando necessário → overflow-y: auto; <br /> - Eliminar mudanças de layout quando a barra de rolagem aparece → scrollbar-gutter: stable; <br /> - Definir tamanho mínimo do conteúdo no Flexbox → min-width: 0; (o valor padrão é auto, então pode causar overflow)<br /> - Definir tamanho mínimo do conteúdo no CSS Grid → usar minmax() <br /> - Ao usar CSS Grid, Auto Fit vs. Auto Fill → na maioria dos casos, auto-fill é melhor <br /> - Definir largura máxima da imagem → max-width: 100% <br /> - Ao usar position: sticky em filhos de um contêiner grid, aplicar align-self: start <br /> - Seletores em grupo podem não funcionar em outros navegadores, então separe cada um deles</p>