¿Qué son las container queries y qué problema resuelven?

Las container queries (consultas de contenedor), implementadas en CSS mediante la regla @container, son una característica que permite que los estilos de un elemento respondan a las dimensiones de su contenedor padre en lugar de depender únicamente del tamaño global de la ventana gráfica (viewport), como hacen las media queries.

El problema que resuelven:

Tradicionalmente, con las media queries, adaptábamos el diseño de una página entera o de secciones grandes basándonos en el ancho total de la pantalla. Sin embargo, esto no era ideal para componentes individuales y reutilizables.

Imagina una tarjeta de producto: podría necesitar un diseño diferente si se coloca en una columna lateral estrecha en comparación a cuando se muestra en un área de contenido principal ancha, independientemente del tamaño total de la ventana. Antes de las container queries, lograr esta adaptabilidad a nivel de componente requería a menudo soluciones complejas con JavaScript o trucos de CSS.

Las container queries resuelven este problema permitiendo que los componentes sean verdaderamente autónomos y se adapten a su contexto inmediato. Un componente puede cambiar su propio diseño basándose en el espacio que se le ha asignado, sin importar dónde se coloque en la página o cuán ancha sea la ventana del navegador.

¿Cómo funcionan (conceptualmente)?

1. Definir un contenedor de consulta: Primero, se debe indicar qué elemento actuará como contenedor cuyas dimensiones serán consultadas. Esto se hace con la propiedad container-type (por ejemplo, inline-size para consultar el ancho) en el elemento contenedor. Opcionalmente, se puede usar container-name para nombrar el contexto.
2. Aplicar estilos con @container: Luego, se utiliza la regla @container (similar a @media) para aplicar estilos a los elementos descendientes de ese contenedor cuando se cumplen ciertas condiciones de tamaño del contenedor.

/* 1. Hacemos que .mi-contenedor-padre sea un 'query container' para su ancho */
.mi-contenedor-padre {
  container-type: inline-size;
  /* Opcional: container-name: mi-contexto; */
}

/* 2. Aplicamos estilos a .elemento-hijo cuando .mi-contenedor-padre alcanza cierto ancho */
@container (min-width: 500px) {
  .elemento-hijo {
    /* Estilos que se aplicarán si .mi-contenedor-padre tiene al menos 500px de ancho */
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}Lenguaje del código: PHP (php)

Esto facilita enormemente la creación de componentes modulares, reutilizables y verdaderamente adaptables, ya que su lógica de estilo se basa en su propio espacio disponible.