Han salido muchas nuevas y alucinantes propiedades de CSS, pero hoy nos centraremos en una en concreto, las container queries.

Y tu estarás pensando, ¿como que nuevas propiedades CSS? ¿Ha salido CSS4 o algo así?. La respuesta es: No, no ha salido CSS4.

En otro post hablaremos de cómo se definen las nuevas propiedades y versiones de CSS. Pero por el momento te diremos que si ves una propiedad que desconocías en una página aleatoria de internet, la forma más rápida y directa de comprobar para qué sirve esa propiedad y qué soporte tiene es consultar MDN y caniuse.

Por norma general en MDN vamos a recibir una descripción de la propiedad, cómo usarla y un par de ejemplos. Por otro lado la web caniuse nos va a proporcionar una tabla en la que podremos consultar qué navegadores y versiones de estos soportan qué propiedades.

¿Y ya puedo usar las container queries en producción?. No seas impaciente, depende del entorno, pero esto lo explicaremos más a fondo en otro artículo.

En este caso podemos ver que solamente existe soporte completo en Chrome 106 y Safari version 16.0 y el porcentaje de soporte global ronda el 60%, así que en mi opinión vale la pena esperar un poco para implementar esta nueva propiedad.

¿Qué son las container queries?

Bueno, pues como su propio nombre indica se trata de una propiedad que realiza queries, dependiendo del tamaño o los estilos del componente definido como contenedor.

¿Y no tenemos ya las media queries para eso? Sí, pero fíjate que he comentado que las container queries responden al tamaño o los estilos del componente definido como contenedor. Eso significa que puedes definir como contenedor el padre de tu elemento u otro elemento que lo contenga que esté más arriba en el árbol del DOM, en cambio las media queries sólo reaccionan al viewport del dispositivo.

Esto te permite una flexibilidad nunca antes vista para el responsive en HTML, pero sobre todo en React, ya que prácticamente puedes encapsular tus componentes y tener elementos independientes que reaccionan al entorno.

Todo esto está muy bien, pero…

¿Cómo se implementan las container queries?

Con este breve y sencillo ejemplo se puede entender a la perfección:

El primer paso sería definir un componente, en este ejemplo trabajaremos con una card.

<div class="card-container">
  <div class="card">
    <figure>
      <img
        src="http://static.libsyn.com/p/assets/9/8/1/c/981c2ef87dd4c9e7/TCP000_thumbnail_v3.png"
      />
    </figure>
    <div>
      <div class="meta">
        <h2>Preference Media Queries</h2>
        <span class="time">15:40</span>
      </div>

      <div class="notes">
        <p class="desc">
          In this episode we narrow our focus on user-preference-based media
          queries, which enable you to create personalized experiences based on
          your users custom settings and needs.
        </p>
        <div class="links">
          <h3>Links</h3>
          <ul>
            <li>Media Queries → <a href="#">http://goo.gle/2MhYfR2</a></li>
            <li>Scripting → <a href="#">http://goo.gle/2Mdan5E</a></li>
            <li>
              The 'display-mode' media feature →
              <a href="#">http://goo.gle/2NoFr3c</a>
            </li>
            <li>
              Prefers-* Security and Privacy →
              <a href="#">http://goo.gle/3kfwUM0</a>
            </li>
            <li>
              CSS Color Adjustment → <a href="#">http://goo.gle/3qLkduJ</a>
            </li>
          </ul>
        </div>
      </div>

      <button>Download Episode</button>
    </div>
  </div>
</div>

Ejemplo de Una Kravets

Una vez tenemos el componente, se le tiene que indicar en el CSS qué elemento será el contenedor. Y también tenemos que especificar los breakpoints a los que queremos que respondan los subelementos de la card.

En el código de a continuación se puede ver que para definir un breakpoint se tiene que hacer igual que con las media queries, pero en vez de usar la palabra @media se usa @container.

/* Container definition */
.card-container {
  container-type: inline-size;
}

/* Breakpoints definition */
@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 2.2rem;
  }
}

@container (max-width: 650px) {
  .desc {
    display: none;
  }

  h2 {
    font-size: 2rem;
  }

  .card {
    gap: 1rem;
  }
}

@container (max-width: 460px) {
  .card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }

  button {
    display: block;
    margin: 1rem auto 0;
  }
}

@container (max-width: 300px) {
  h2 {
    font-size: 1.5rem;
  }

  .time {
    display: none;
  }
}

Ejemplo de Una Kravets

Y el resultado sería este.

Así de sencillo será realizar el responsive con las container queries.

Recursos

• W3C - CSS Container Queries
• MDN - CSS Container Queries
• Awesome Container Queries
• Una Kravets Container Queries Example