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

L'amore per le query container è nell'aria. Questo San Valentino, le query container e le unità di query containerizzate 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 supporti, puoi eseguire query sulla dimensione dell'area visibile, mentre le query contenitore abilitano i componenti che possono cambiare in base alla posizione in cui si trovano nell'interfaccia utente.

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

Utilizzare le query container

Per utilizzare le query contenitore, devi prima impostare il contenimento su un elemento principale. Per farlo, imposta un container-type sul contenitore principale o utilizza l'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, questa sarebbe la larghezza della scheda, in quanto il testo scorre in linea da sinistra a destra.

Ora puoi utilizzare questo contenitore per applicare stili a uno dei relativi elementi secondari 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 lunghezza delle query del container allo stesso modo dei valori delle unità basate sull'area visibile. La differenza è che le unità container corrispondono al container anziché all'area visibile. L'esempio seguente mostra la tipografia adattabile utilizzando le unità di query del container e la funzione clamp() per assegnare 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() assegna un valore minimo di 2rem e un 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 container durante le feste, abbiamo creato un San Valentino per tutti, indipendentemente dal browser stabile (versione più recente) in cui lo visualizzi.