Questo San Valentino festeggiamo le dimensioni delle query container e le unità di query container in tutti i browser stabili.
L'amore tra le query sul container è nell'aria. Questo San Valentino, le query relative alle dimensioni del container e le relative unità di query sono stabili in tutti i browser moderni.
Con le query del contenitore, puoi eseguire query sulle informazioni sugli stili di un elemento principale, come il suo inline-size. Con le query supporti, potevi eseguire query sulle dimensioni dell'area visibile, mentre le query contenitore attivano componenti che possono cambiare in base alla posizione in cui si trovano nell'interfaccia utente.
Le query container sono particolarmente utili per il design adattabile e i componenti riutilizzabili. Ad esempio, abilitare un componente di una scheda che può essere strutturato in un modo quando viene inserito in una barra laterale e in una configurazione diversa all'interno di una griglia del prodotto.
Utilizzo delle query container
Per utilizzare le query contenitore, imposta prima il contenimento su un elemento principale. Per farlo, imposta un container-type sul contenitore principale oppure utilizza l'abbreviazione container per assegnare contemporaneamente un tipo e un nome:
.card-container {
container: card / inline-size;
}
L'impostazione di container-type su inline-size esegue una query sulla dimensione delle indicazioni in linea dell'elemento principale. Nelle lingue latine come l'inglese, questa indica la larghezza della scheda, in quanto il testo è in linea da sinistra a destra.
Ora puoi utilizzare il contenitore per applicare gli stili a tutti i 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 della query del contenitore nello stesso modo in cui useresti i valori delle unità basate sull'area visibile. La differenza è che le unità container corrispondono al container anziché all'area visibile. L'esempio seguente mostra una tipografia adattabile utilizzando le unità di query del contenitore e la funzione clamp() per assegnare un valore minimo e massimo della dimensione:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
Il valore 15cqi sopra riportato si riferisce al 15% delle dimensioni in linea del contenitore. La funzione clamp() assegna a questo valore un valore minimo di 2 rem e un massimo di 4 rem. Nel frattempo, se 15cqi è compreso tra questi valori, il testo verrà ridotto e aumentato di conseguenza.
Una query container Valentine
Per celebrare l'amore con le query relative al container durante le feste, abbiamo regalato un San Valentino a tutti voi, a prescindere dal browser stabile (ultima versione) che utilizzate.
Parte della serie Newly interoperable