Avanzato15 min

Container Queries

Stili che rispondono alle dimensioni del contenitore padre, non della viewport.

Container Queries

Le media queries rispondono alla viewport. Le container queries rispondono al contenitore padre. Questo rende i componenti veramente riutilizzabili, indipendenti dal contesto.

Definire un contenitore

Il contenitore deve dichiarare esplicitamente di essere osservabile.

css

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

Rispondere alle dimensioni del contenitore

css

/* Layout verticale di default */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Se il contenitore è largo almeno 500px, layout orizzontale */
@container card (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card__immagine {
    width: 40%;
  }
}

Container query units

Puoi usare unità relative al contenitore per dimensioni fluide.

css

.card__titolo {
  font-size: clamp(1rem, 3cqi, 1.5rem);
  /* cqi = 1% della inline-size del container */
}

Combinare con media queries

Le container queries non sostituiscono le media queries — le completano.

css

/* Il layout della pagina risponde alla viewport */
@media (min-width: 1024px) {
  .griglia {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Il componente card risponde al suo contenitore */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

●Usa container-type: inline-size per il caso più comune
●Le container queries rendono i componenti indipendenti dal layout
●Supporto browser eccellente nei browser moderni dal 2023