Le query container vengono indirizzate a browser stabili

Questo San Valentino, festeggiamo le query container con dimensioni e le unità di query container che arrivano in tutti i browser stabili.

Una Kravets

Amore per le query sui container nell'aria! Per San Valentino, le query dei contenitori delle dimensioni e le unità di query dei contenitori sono stabili in tutti i browser moderni.

Con le query contenitore puoi eseguire query sulle informazioni relative agli stili di un elemento principale, ad esempio inline-size. Con le query sui media, puoi eseguire query sulle dimensioni dell'area visibile, mentre le query sui contenitori attivano componenti che possono cambiare in base alla posizione nell'interfaccia utente.

Le query dei contenitori sono particolarmente utili per il design responsive e i componenti riutilizzabili. Ad esempio, puoi attivare un componente della scheda che può essere visualizzato in un modo quando è inserito in una barra laterale e in una configurazione diversa all'interno di una griglia di prodotti.

Utilizzare le query container

Per utilizzare le query del contenitore, imposta prima il contenimento su un elemento principale. A tale scopo, imposta un container-type sul contenitore principale o utilizza la abbreviazione container per assegnare contemporaneamente un tipo e un nome:

.card-container {
  container: card / inline-size;
}

Se il criterio container-type viene impostato su inline-size, viene eseguita la query sulle dimensioni della direzione in linea dell'elemento padre. Nelle lingue latine come l'inglese, si tratta della larghezza della scheda, poiché il testo scorre in linea da sinistra a destra.

Ora puoi utilizzare il contenitore per applicare stili a qualsiasi elemento secondario utilizzando @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Inoltre, puoi utilizzare i valori delle unità di misura della durata della query del contenitore nello stesso modo in cui utilizzeresti i valori delle unità basati sul viewport. La differenza è che le unità container corrispondono al container anziché all'area visibile. L'esempio seguente mostra la tipografia adattabile che utilizza le unità di query del contenitore e la funzione clamp() per fornire un valore minimo e massimo per le dimensioni:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

Il valore 15cqi riportato sopra si riferisce al 15% delle dimensioni in linea del container. La funzione clamp() restituisce un valore minimo di 2rem e un valore massimo di 4rem. Nel frattempo, se 15cqi è compreso tra questi valori, il testo si ridurrà e aumenterà di conseguenza.

Una query container San Valentino

Per celebrare l'amore per le query sui contenitori in occasione di questa festa, abbiamo creato una cartolina di San Valentino da condividere con tutti, indipendentemente dal browser stabile (ultima versione) che stai utilizzando.