Container queries

Conoce un nuevo feature de CSS que nos ayudará a crear diseños más centrados en el contenido

¿Qué son los Container queries?

CSS avanza al igual que todos los frameworks y al fin llegaron los container queries un feature que nos ayudará a crear diseños centrados en el contenido, no en el tamaño del viewport disponible. Aprende como puedes probarlos y casos de uso.

¿Para que sirven?

La forma de hacer responsive design era con media queries que adaptaban nuestro diseño al tamaño de viewport disponible.

Los container queries funcionan de forma similar en el código y de manera visual, la diferencia es que dependiendo el ancho del contenedor de un elemento aplicará las reglas correspondientes, es una nueva forma de crear que nos permite centrarnos en el componente y crear diseños más independientes del dispositivo y centrados en el contenido.

¿Cómo activarlos?

Actualmente solo están disponibles en Chrome Canary, una vez lo tengas instalado necesitarás entrar a chrome://flags , buscar container queries, activarlos con la opción Enable y hacer click en Relaunch

¿Cómo funcionan?

Un hijo responderá al tamaño de su padre, esto se indica con 
contain: layout inline-size

La forma de declarar un container-queries es muy similar a los ya conocidos media-queries, así que ya estás familiarizado con la sintaxis. Lo que sigue es que empezar a probarlos.

.parent {
  contain: layout inline-size;
}

@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}

Casos de uso interesantes

Al implementar diseños en muy importante cuidar y respetar el peso visual que se especifica, en muchos casos dada la ubicación y tamaño del componente se necesita cambiar el tamaño de la tipografía o el color, y todo esto dependerá directamente del espacio que disponga el componente o elemento padre.

1. Tipografía: Será útil cambiar la tipografía de un elemento, según el tamaño de su contenedor. Actualmente ni flexbox ni CSS Grid nos ayudan de forma natural con esto.

2. Jerarquía de contenido:

Dependiendo el tamaño del componente algunos elementos pasan a tener más o menos prioridad, por ejemplo una card del autor de un blogpost quizá su foto pase a ser innecesaria en algún tamaño y necesitemos darle mayor prioridad al título del post. Ahora será posible hacer estos cambios en relación con el contenedor.