container-type e container-name

Le container query consentono al CSS di applicare gli stili in base alle dimensioni di un contenitore padre anziché a quelle del viewport. In questo modo è possibile realizzare un design responsive realmente basato sui componenti, in cui ogni componente si adatta al contesto in cui viene inserito.

Con le media query, un componente card in una sidebar di 300px non può sapere di essere piccolo: sa soltanto che il viewport è ampio. Le container query consentono al componente di reagire alle dimensioni del proprio contenitore, non a quelle del viewport globale.

Per interrogare un contenitore, dichiararlo prima come contenitore per le query utilizzando container-type:

Valori disponibili:

• inline-size — abilita le query sulla dimensione inline del contenitore, ovvero sulla larghezza nella scrittura orizzontale
• size — abilita le query sia sulla dimensione inline sia su quella block, ovvero su larghezza e altezza
• normal — valore predefinito: nessuna query sulle dimensioni, ma le query sugli stili restano possibili

Assegnare un nome al contenitore per farvi riferimento nelle query. È necessario quando esistono contenitori annidati e si vuole interrogare uno specifico antenato:

La forma abbreviata container imposta sia il nome sia il tipo:

È comunque possibile interrogare un contenitore senza nome: per impostazione predefinita, la regola @container si applica al contenitore antenato più vicino. I nomi sono necessari solo quando si vuole ignorare gli antenati intermedi e raggiungere uno specifico antenato.

Ogni elemento container-type ottiene un proprio contenimento del layout. Ciò significa che le modifiche alle dimensioni all'interno del contenitore non influiscono sugli antenati, con un vantaggio in termini di prestazioni. Quando il contenitore cambia, il browser non deve ricalcolare l'intera pagina.

Impostare container-type: inline-size applica implicitamente contain: inline-size layout style all'elemento. Questo impedisce che le dimensioni del contenitore influiscano sul suo stesso layout, un requisito necessario per il funzionamento delle query sulle dimensioni.

Una configurazione completa delle container query:

Utilizzare i contenitori per: adattamento a livello di componente, componenti riutilizzabili in contesti di layout diversi, card e widget inseriti in posizioni imprevedibili. Utilizzare le media query per: modifiche al layout globale, ridimensionamento della tipografia, visualizzazione o occultamento di sezioni ampie.

Quale valore della proprietà rende un elemento interrogabile per la sua larghezza utilizzando le regole @container?

container-type: inline-size definisce un elemento come contenitore interrogabile per la sua larghezza. Utilizzare container-name per assegnare nomi ai contenitori e selezionare quelli desiderati. La forma abbreviata container imposta entrambi i valori. Le container query risolvono il problema dei componenti inseriti in contesti sconosciuti, che le media query basate sul viewport non sono in grado di gestire.