Las seis unidades de contenedor

Las container queries te dejan preguntar por el tamaño del contenedor; las unidades de contenedor te dejan calcular con él. Son seis, siguen exactamente la misma estructura que las seis unidades de viewport que ya usas, y cambian una cosa fundamental: el punto de referencia deja de ser la ventana y pasa a ser el trozo de pantalla que le han dado a tu componente. Con eso, un componente puede tener proporciones internas propias sin saber nada del sitio donde vive.

El catálogo

La correspondencia con las unidades de viewport es exacta: cqw es a vw lo que cqi es a vi. Si ya tienes claro por qué existen vi y vb, no hay nada nuevo que aprender salvo el referente.

Merece la pena fijarse en un detalle del que casi nadie se da cuenta: cqmin y cqmax se definen sobre las unidades lógicas, no sobre las físicas. Comparan cqi con cqb, no cqw con cqh. En escritura horizontal da igual, pero en un contenedor en modo vertical la diferencia es real.

Cómo se calculan

Un contenedor de 640px de ancho en escritura horizontal:

.contenedor { container: caja / inline-size; inline-size: 640px; }

.hijo {
  padding-inline: 5cqi;      /* 5% de 640 = 32px */
  font-size: 4cqi;           /* 25.6px */
  border-radius: 1.5cqi;     /* 9.6px */
}

Nada misterioso: es un porcentaje del contenedor, con la diferencia decisiva de que se puede usar en propiedades donde un porcentaje significaría otra cosa o directamente no valdría.

Ahí está la razón de ser de estas unidades. padding: 5% ya existía, pero los porcentajes de padding se resuelven siempre contra el tamaño en línea del bloque contenedor, incluso los verticales, que es una rareza histórica con la que hay que convivir. Y font-size: 5% significa el 5% del tamaño de fuente heredado, no del contenedor. Con cqi puedes expresar “una proporción del contenedor” en cualquier propiedad que acepte una longitud, sin las reglas caprichosas de cada porcentaje.

/* imposible antes de las unidades de contenedor */
.titulo   { font-size: 5cqi; }
.icono    { inline-size: 8cqi; block-size: 8cqi; }
.separa   { margin-block: 3cqb; }        /* proporcional al ALTO del contenedor */
.sombra   { box-shadow: 0 0.5cqi 2cqi rgb(0 0 0 / 0.2); }

Elegir la unidad correcta

Lógicas frente a físicas

El mismo argumento que en el resto del CSS moderno: cqi significa “a lo largo de la línea de texto” y cqw significa “horizontal”. En un documento occidental coinciden; en cuanto un componente se coloca dentro de algo con writing-mode: vertical-rl, dejan de coincidir y la versión lógica es la que sigue produciendo el diseño que querías.

Hay un argumento adicional que es específico de estas unidades. El tipo de contenedor que vas a declarar el 95% de las veces es inline-size, y ese tipo garantiza el eje en línea. Escribir cqi deja explícito que estás usando la dimensión que el contenedor garantiza. Escribir cqw funciona igual en horizontal, pero oculta esa correspondencia y produce sorpresas el día que alguien cambie el modo de escritura.

cqmin y cqmax

Sirven para lo mismo que vmin y vmax: expresar algo que debe funcionar independientemente de la orientación del contenedor.

/* un cuadrado que siempre cabe, sea el contenedor ancho o alto */
.avatar {
  inline-size: 20cqmin;
  aspect-ratio: 1;
}

/* un margen que crece con la dimension dominante */
.dramatico { padding: 4cqmax; }

cqmin es la elección segura para elementos que no deben desbordar: al tomar la dimensión menor, garantizas que el resultado cabe en las dos. cqmax es lo contrario y produce efectos deliberadamente exagerados en contenedores muy alargados.

Las dos requieren conocer los dos ejes, así que exigen container-type: size con todo lo que eso implica. En la práctica se usan poco por ese motivo, y su sitio natural son los contenedores con aspect-ratio declarado, donde la altura ya está determinada.

Cuándo una proporción del contenedor es lo correcto

No todo debería ser proporcional. La regla que funciona en producción es distinguir tres categorías.

Lo que debe ser constante son los grosores ópticos: bordes de 1px, sombras de foco, la altura mínima de un objetivo táctil. Escalarlos con el contenedor produce bordes de 3px en tarjetas grandes que se ven mal.

Lo que debe seguir al usuario es el tamaño del texto de lectura y los espaciados relacionados con él. Ahí manda rem, porque respeta la preferencia de tamaño de letra.

Lo que debe seguir al contenedor son las proporciones internas del componente: el ancho de la columna de la imagen, el padding de la tarjeta, el tamaño de un título decorativo, la separación entre bloques del propio componente. Ahí es donde cqi gana, y donde antes había una variante compacta y otra ancha mantenidas a mano.