CSS defensivo

Uma coleção de snippets para evitar problemas específicos de CSS

• Quebra de linha no Flexbox → flex-wrap: wrap;

• Dar espaço sobrando → margin-right: 1rem;

• Conteúdo longo que não deve quebrar linha → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Evitar que imagens sejam esticadas/distorcidas → object-fit: cover;

• Conter o encadeamento de rolagem → overscroll-behavior-y: contain;

• Definir valor de fallback para variável CSS → max-width: calc(100% - var(--actions-width, 70px));

• Altura fixa → usar min-height em vez de height

• Largura fixa → usar min-width em vez de width

• Remover repetição do fundo → background-repeat: no-repeat;

• Aproveitar media queries verticais → ao usar algo como position:sticky, aplicar só acima de determinada altura vertical @media (min-height:600px) {}

• Ao organizar itens com Flexbox, usar gap: 1rem; em vez de justify-content: space-between;

• Ao colocar texto branco sobre imagem, lidar com falha no carregamento da imagem → usar background-color: grey;

• Cuidado ao usar valores fixos sobre CSS Grid → sempre usar media queries

• Mostrar barra de rolagem só quando necessário → overflow-y: auto;

• Eliminar mudanças de layout quando a barra de rolagem aparece → scrollbar-gutter: stable;

• Definir tamanho mínimo do conteúdo no Flexbox → min-width: 0; (o valor padrão é auto, então pode causar overflow)

• Definir tamanho mínimo do conteúdo no CSS Grid → usar minmax()

• Ao usar CSS Grid, Auto Fit vs. Auto Fill → na maioria dos casos, auto-fill é melhor

• Definir largura máxima da imagem → max-width: 100%

• Ao usar position: sticky em filhos de um contêiner grid, aplicar align-self: start

• Seletores em grupo podem não funcionar em outros navegadores, então separe cada um deles