Diseño

CSS Container Queries: solo el 41% las usa pese a un soporte del 94%

La distinción práctica es clara: una media query con min-width: 1024px activa estilos cuando el viewport alcanza ese ancho, sin importar que el componente afectado solo tenga 300px disponibles en su celda de grid. Una container query, en cambio, evalúa el espacio real que el contenedor padre asigna al componente. Esto convierte las container queries en la herramienta correcta para diseño de componentes reutilizables, mientras que las media queries siguen siendo apropiadas para la estructura de página a nivel macro. El artículo propone una distinción operativa: media queries para layout de página, container queries para layout de componente. Con más de 2.300 tamaños de viewport únicos documentados en la web actual, diseñar por breakpoints de viewport para componentes reutilizables es, por definición, incompleto.