Las tarjetas de artículo en la página principal tenían un bug de layout que solo aparecía en un lugar específico: la página de una etiqueta con exactamente dos entradas, renderizada en un ancho de viewport particular. El título de la tarjeta se envolvía de forma torpe y colisionaba con las píldoras de etiquetas debajo. Lo había parchado con una media query de ancho de viewport dos veces, y ambos parches se rompieron de nuevo la siguiente vez que toqué la grilla.
Por qué la media query seguía fallando
El problema real nunca fue el viewport. Era el propio ancho de la tarjeta, que cambia según cuántas columnas le da la grilla, lo cual depende de la página —página principal, página de etiqueta, y cualquier layout futuro que reutilice el componente de tarjeta. Una media query solo sabe del viewport; no tiene idea de qué ancho terminó teniendo la tarjeta.
.card {
container-type: inline-size;
}
@container (max-width: 22rem) {
.card-title {
font-size: 1.1rem;
}
}Cambiar a una container query lo arregló en un solo cambio, porque la consulta ahora pregunta por lo que realmente importa —qué tan ancha es esta tarjeta, en este layout, ahora mismo— en lugar de un proxy de eso. Los dos parches anteriores eran ambos técnicamente correctas suposiciones sobre anchos de viewport que resultaban correlacionar con que la tarjeta fuera angosta en un layout específico. La container query no necesita adivinar.