Nello script #421 abbiamo introdotto le Container Queries e il loro ruolo nel produrre un layout responsivo[.b] sulla base della dimensione di un contenitore rispetto alla viewport.

Un ulteriore vantaggio che troviamo nell'applicazione delle container queries è la possibilità di nominare ogni singolo container e creare layout globali o specifici per ognuno di essi.

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

@container sidebar (min-width: 600px) {
  .card {
    font-size: 1.5rem;
    background-color: lightblue;
  }
}

Con il codice appena mostrato abbiamo definito che un elemento con classe layout avrà un identificatore container chiamato sidebar. Quando il container sidebar supererà la dimensione di 600px tutte le classi card al loro interno cambieranno stile.