CSS - Container queries (Experimental)

CSS Container Queries (Disponible en 2023)

Un paso extra al responsive, pero de momento no está disponible para Firefox, aunque dicen que estará en 2023.

Se basa en el tamaño del elemento, no del viewport general de la web. Esto nos da mucha más versatilidad para reutilizar componentes / elementos en distintos lugares sólo dependiendo de sí mismos y su tamaño.

Para utilizarlas, hay que declarar que ese elemento tendrá disponible este tipo de queries, para evitar que el navegador tenga que gastar recursos en todos los elementos. Para ello, hay que declararle el valor correcto a container-type, con size, inline-size o normal. Estos valores tienen los siguientes efectos:

• size: la consulta se basará en las dimensiones en horizontal y vertical del elemento.
• inline-size: la consulta se basará sólo basándose en la horizotal del elemento, el navegador gasta menos recursos.
• normal: el elemento no es un contenedor de consulta para ninguna consulta de tamaño de contenedor, pero sigue siendo un contenedor de consulta para las consultas de estilo de contenedor.

Ejemplo

.card {
  container-type: inline-size;
  container-name: sidebar; // optativo pero útil
}

.card h2 {
  font-size: 1em;
}

@container sidebar (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}