Container queries y anidamiento en CSS

Haz que tus componentes respondan a su contenedor en lugar de al viewport, y estructura tus hojas de estilos con anidamiento nativo.

10 min · 3 preguntas

Las media queries miden el viewport: una tarjeta mostrada tanto en una barra lateral estrecha como en una cuadrícula principal no puede adaptarse correctamente con ellas, porque el mismo ancho de pantalla corresponde a dos contextos distintos. Las container queries resuelven este desacoplamiento: el componente consulta el tamaño de su contenedor. Requisito previo: designar explícitamente un contenedor con container-type (inline-size para medir solo el eje horizontal, el caso común), opcionalmente nombrado mediante container-name.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
}

Las unidades de contenedor completan el panorama: 1cqi equivale al 1% del tamaño inline del contenedor consultado (también existen cqw, cqh, cqb, cqmin, cqmax). Combinadas con clamp(), producen tipografía fluida por componente: la misma tarjeta obtiene un título proporcionado a su columna, esté donde esté colocada.

.card-slot {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

@container (max-width: 300px) {
  .card .meta {
    display: none;
  }
}

El anidamiento nativo por fin trae el anidamiento sin preprocesador. El selector & hace referencia al contexto padre; las media queries y @container se anidan directamente dentro de una regla. Una diferencia crucial respecto a Sass: el padre anidado se trata como si estuviera envuelto en :is(). Dos consecuencias: la especificidad del padre es la del más fuerte de sus selectores si es una lista, y & .child no realiza concatenación de cadenas - el patrón &__element de Sass para generar nombres BEM no existe de forma nativa.

.menu {
  display: flex;
  gap: 8px;

  & > li {
    list-style: none;

    &:hover {
      background: #f3f4f6;
    }
  }

  @media (min-width: 768px) {
    gap: 16px;
  }
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Por qué es preferible una container query a una media query para una tarjeta reutilizable?
   • Es más rápida de evaluar para el motor de renderizado
   • Reacciona al tamaño del contenedor de la tarjeta, que es el mismo en cualquier pantalla donde la columna sea estrecha
   • Funciona sin declarar ningún requisito previo de CSS
   • Puede consultar la altura del viewport además de su ancho
2. ¿A qué corresponde 5cqi?
   • El 5% del ancho del viewport
   • El 5% del tamaño inline del contenedor consultado
   • 5 veces el tamaño de fuente del contenedor
3. ¿En qué se diferencia el anidamiento nativo del anidamiento de Sass?
   • El anidamiento nativo prohíbe anidar media queries dentro de una regla
   • El anidamiento nativo trata al padre como envuelto en :is() y no permite la concatenación al estilo &__element
   • El anidamiento nativo requiere un preprocesador para compilar el símbolo &
   • El anidamiento nativo limita el anidamiento a un solo nivel