Nel CSS abbiamo la possibilità di definire, attraverso le media query, degli stili che verranno applicati in base alla dimensione della pagina. Ma possiamo rifarci anche a container, che così come le media query sono CSS at-rule: regole che impongono un determinato comportamento nel CSS.

Diversamente dalle media query, i container applicano regole sulla base della dimensione del container a cui sono applicati.

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

.post {
  container-type: inline-size;
}

/* Quando la dimensione è inferiore ai 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    color: white;
    background-color: black;
    font-size: 0.8em;
  }
}

La proprietà container-type: inline-size permette al runtime di applicare ogni stile che intercetti una proprietà di tipo width. Se volessimo utilizzare sia l'altezza che la larghezza, dovremo invece scrivere container-type: size.

Una limitazione alla propagazione delle regole consiste nel nominare il container e richiamarlo all'interno della classe a cui andrà applicato tramite la proprietà container-name.

.post {
  container-name: mycard;
  container-type: inline-size;
}

.post1 {
  container-type: inline-size;
}

@container mycard (width < 650px) {
  .card {
    width: 50%;
    color: white;
    background-color: black;
    font-size: 0.8em;
  }
}

Anche se la classe .post1 è abilitata a ricevere le modifiche provenienti da @container, sull'interfaccia non verrà applicata alcuna modifica, dato che per applicare tali stili occorrerà definire il container-name: mycard, così come specificato all'interno di .post