CSS defensivo

<p>Colección de snippets para evitar que aparezcan ciertos problemas de CSS<br /> - Salto de línea en Flexbox → `flex-wrap: wrap;`<br /> - Dar espacio libre → `margin-right: 1rem;`<br /> - Contenido largo que no debe saltar de línea → `text-overflow: ellipsis; white-space:nowrap; overflow: hidden;`<br /> - Evitar que una imagen se estire o se deforme → `object-fit: cover;`<br /> - Bloqueo del encadenamiento de scroll → `overscroll-behavior-y: contain;` <br /> - Dar un valor de respaldo a una variable CSS → `max-width: calc(100% - var(--actions-width, 70px));`<br /> - Altura fija → usar `min-height` en lugar de `height` <br /> - Ancho fijo → usar `min-width` en lugar de `width` <br /> - Quitar la repetición del fondo → `background-repeat: no-repeat;`<br /> - Aprovechar media queries verticales → al usar algo como `position:sticky`, aplicarlo solo a partir de cierta altura vertical con `@media (min-height:600px) {}`<br /> - Al acomodar ítems en Flexbox, usar `gap: 1rem;` en vez de `justify-content: space-between;`<br /> - Si pones texto blanco sobre una imagen, prever el fallo de carga de la imagen → usar `background-color: grey;` <br /> - Cuidado al usar valores fijos sobre CSS Grid → usar siempre media queries <br /> - Mostrar la barra de scroll solo cuando haga falta → `overflow-y: auto;` <br /> - Evitar cambios de layout cuando aparece la barra de scroll → `scrollbar-gutter: stable;` <br /> - Definir el tamaño mínimo del contenido en Flexbox → `min-width: 0;` (el valor por defecto es `auto`, así que puede causar overflow)<br /> - Definir el tamaño mínimo del contenido en CSS Grid → usar `minmax()` <br /> - Al usar CSS Grid, Auto Fit vs. Auto Fill → en la mayoría de los casos conviene más `auto-fill` <br /> - Definir el ancho máximo de una imagen → `max-width: 100%` <br /> - Al usar `position: sticky` en un hijo de un contenedor grid, aplicar `align-self: start` <br /> - Los selectores de grupo pueden no funcionar en otros navegadores, así que conviene separarlos uno por uno</p>