CSS defensivo

Colección de snippets para evitar que aparezcan ciertos problemas de CSS

• Salto de línea en Flexbox → flex-wrap: wrap;

• Dar espacio libre → margin-right: 1rem;

• Contenido largo que no debe saltar de línea → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Evitar que una imagen se estire o se deforme → object-fit: cover;

• Bloqueo del encadenamiento de scroll → overscroll-behavior-y: contain;

• Dar un valor de respaldo a una variable CSS → max-width: calc(100% - var(--actions-width, 70px));

• Altura fija → usar min-height en lugar de height

• Ancho fijo → usar min-width en lugar de width

• Quitar la repetición del fondo → background-repeat: no-repeat;

• Aprovechar media queries verticales → al usar algo como position:sticky, aplicarlo solo a partir de cierta altura vertical con @media (min-height:600px) {}

• Al acomodar ítems en Flexbox, usar gap: 1rem; en vez de justify-content: space-between;

• Si pones texto blanco sobre una imagen, prever el fallo de carga de la imagen → usar background-color: grey;

• Cuidado al usar valores fijos sobre CSS Grid → usar siempre media queries

• Mostrar la barra de scroll solo cuando haga falta → overflow-y: auto;

• Evitar cambios de layout cuando aparece la barra de scroll → scrollbar-gutter: stable;

• Definir el tamaño mínimo del contenido en Flexbox → min-width: 0; (el valor por defecto es auto, así que puede causar overflow)

• Definir el tamaño mínimo del contenido en CSS Grid → usar minmax()

• Al usar CSS Grid, Auto Fit vs. Auto Fill → en la mayoría de los casos conviene más auto-fill

• Definir el ancho máximo de una imagen → max-width: 100%

• Al usar position: sticky en un hijo de un contenedor grid, aplicar align-self: start

• Los selectores de grupo pueden no funcionar en otros navegadores, así que conviene separarlos uno por uno