Come utilizzare le query contenitore nei CSS

Per molto tempo, le query multimediali sono state l'unico modo per rendere i progetti dell'interfaccia utente reattivi su schermi di dimensioni diverse. Ma anche quello aveva i suoi limiti. Uno dei maggiori problemi con l'utilizzo delle media query era che era possibile modellare un elemento solo in risposta ai cambiamenti nelle dimensioni dello schermo, non al suo elemento contenitore più vicino.

Le query sui contenitori sono state introdotte per risolvere questo problema. Sono anche aumentati con la popolarità di framework come React e Vue.js che funzionano creando "componenti" dell'interfaccia utente modulari. Scopri come utilizzare le query contenitore per creare elementi reattivi nel tuo CSS.

Il codice utilizzato in questo articolo è disponibile in this Deposito GitHub ed è gratuito per l'uso con la licenza MIT.

Perché dovresti usare le query contenitore CSS?

Per comprendere l'importanza delle query contenitore, usiamo un esempio che rende più facile cogliere il concetto. Ma prima, devi clonare il codice iniziale da questo Deposito GitHub.

Dopo aver clonato correttamente il repository, esegui il codice. Troverai una pagina web simile alla seguente immagine:

Qui hai un layout a griglia composto da due colonne: la sezione principale e la barra laterale. La sezione principale sembra a posto, ma la barra laterale (che è molto più piccola del contenuto principale) sembra un po' schiacciata.

Il layout è reattivo. Quando rimpicciolisci il browser, puoi vedere che la scheda si trasforma in una colonna verticale:

In altre parole, quando il contenuto inizia a diventare illeggibile, il layout si trasforma in una colonna verticale in cui l'immagine viene sovrapposta al contenuto. Questo effetto deriva dalle media query, che è l'unico modo per determinare la dimensione degli elementi in base all'intera dimensione dello schermo.

In questo caso, ogni volta che lo schermo è inferiore a 800px, impili tutto uno sopra l'altro usando Allineamento della scatola flessibile. Su schermi più grandi, posizioniamo i contenuti fianco a fianco:

@media(larghezza massima: 800 pixel) {
.carta {
direzione flessibile: colonna;
 }
.card-header { 
larghezza: 100%;
 }
}

Per molto tempo, le query sui media sono state una delle principali principi del web design per la creazione di layout reattivi con CSS (ed è stato abbastanza buono per la maggior parte delle cose). Ma sei destinato a imbatterti in scenari in cui le query multimediali non saranno sufficienti o almeno non saranno una soluzione conveniente.

Uno di questi scenari è quando hai una barra laterale (come nell'esempio sopra). In questi casi in cui hai una barra laterale, dovresti selezionare direttamente la scheda della barra laterale e provare a ridurla:

.barra laterale.carta {
/* Rimpicciolisce la carta della barra laterale */
}
@media(larghezza massima: 800 pixel) {
/* Applica uno stile alla pagina quando lo schermo è più stretto di 800px */
}

Può essere abbastanza complicato se lavori con molti elementi perché devi selezionare manualmente tutti gli elementi e ridimensionarli. Finiresti con più codice e complessità extra.

È qui che le query sui contenitori potrebbero essere utili. Invece di essere obbligato a utilizzare il tuo viewport come dimensionamento, puoi utilizzare qualsiasi elemento della tua pagina come contenitore. Quindi quel contenitore può avere le proprie larghezze su cui baseresti le tue query multimediali.

Come creare una query contenitore

Per creare una query contenitore, dovresti iniziare scegliendo come target l'elemento che desideri utilizzare come contenitore (in questo caso, la sezione principale e la barra laterale). All'interno del blocco, è necessario impostare il file tipo contenitore A dimensione in linea:

principale, .barra laterale {
tipo contenitore: dimensione in linea
}

Quando salvi il tuo file CSS, non cambierà nulla nella pagina. Ma ora puoi utilizzare le query del contenitore per ridimensionare e modificare lo stile delle schede nidificate all'interno della sezione principale e della sezione della barra laterale. Nella seguente query contenitore, stai modificando le schede in colonne verticali su schermi larghi 500 px o meno:

@contenitore(larghezza massima: 500 pixel) {
.carta {
direzione flessibile: colonna;
 }
.card-header {
larghezza: 100%;
 }
}

Funzionerà come una normale media query. Ma invece di misurare le dimensioni del tuo schermo, stai misurando le dimensioni dei tuoi contenitori (sezioni della barra principale e laterale). Quindi ora quando il tuo contenitore è 500px o più, usi la vista orizzontale. Altrimenti, usi vertical (predefinito per flexbox).

Dall'immagine sopra, puoi vedere che la barra laterale assume una forma verticale perché è più piccola di 500px. Considerando che, il contenuto principale mantiene il suo layout orizzontale perché è più grande di 500px. Se rimpicciolisci il browser, la barra laterale e il contenuto principale utilizzeranno entrambi l'allineamento verticale quando raggiungono 500 px o meno.

La query del contenitore è incredibilmente potente perché ti consente di ridimensionare le cose in base al contenitore anziché all'intera larghezza del browser. Ciò è particolarmente utile quando si ha a che fare con componenti (come in React o Vue).

Con le query contenitore, puoi ridimensionare facilmente i componenti dell'interfaccia utente in base al loro contenitore, consentendoti di creare componenti completamente autonomi.

Denominazione dei contenitori

Quando crei un file @contenitore query, cerca innanzitutto il contenitore dell'elemento scelto come target all'interno della query. Nel nostro caso, questo sarebbe il contenitore principale e il contenitore della barra laterale.

E anche se le carte fossero all'interno di un altro contenitore, ignorerebbe semplicemente gli altri contenitori e sceglierebbe solo il contenitore più vicino a se stesso. Questo fa parte di un più ampio Concetto CSS noto come selettori CSS.

Nell'esempio seguente, abbiamo trasformato l'elemento body in un contenitore:

corpo {
tipo contenitore: dimensione in linea;
}

Ora abbiamo tre contenitori separati: body, main e aside section. Per impostazione predefinita, le schede scelte come target nella query del contenitore sono più vicine alla sezione principale o alla barra laterale che al corpo. Quindi utilizza le sezioni principale e della barra laterale come contenitori per la query del contenitore.

Per ignorare questo comportamento, devi fare due cose. Innanzitutto, devi assegnare al tuo elemento body un nome contenitore:

corpo {
tipo contenitore: dimensione in linea;
nome-contenitore: corpo;
}

Quindi, quando crei la query del contenitore, devi specificare il nome del contenitore dopo @contenitore.

@contenitore corpo (larghezza massima:1000 pixel){
/* Regole CSS che prendono di mira il contenitore del corpo */
}

Ciò è utile se desideri utilizzare un elemento specifico come contenitore anziché il contenitore più vicino all'elemento che stai prendendo di mira. In altre parole, puoi selezionare qualsiasi contenitore specifico e perfezionare il tuo layout.

Unità contenitore

Un'altra grande caratteristica dei contenitori è che puoi utilizzare le unità contenitore. Queste unità funzionano esattamente come le unità viewport (sono tutte dello stesso identico tipo di unità). Tuttavia, le unità container utilizzano cmq (per impostare la larghezza) e cmq (per impostare l'altezza). Queste unità determinano la larghezza e l'altezza esatte del tuo contenitore.

Le query contenitore CSS ti consentono di utilizzare elementi specifici come punti di riferimento per le tue query multimediali. Questa tecnica è molto utile per creare elementi modulari e autonomi che possono stare in piedi indipendentemente dal contenitore in cui si trovano. Ma le query contenitore utilizzano gli stessi principi delle query multimediali, e questo è qualcosa che dovresti padroneggiare se vuoi essere uno sviluppatore CSS al top dell'1%.