Query sui contenitori

Con le query supporti puoi modificare i layout in base alle dimensioni dell'area visibile o al tipo di dispositivo utilizzato. Le query sui contenitori ti consentono di apportare modifiche più specifiche agli elementi in base alle dimensioni e allo stato dei relativi elementi principali o contenitori.

Immagina di avere un modulo di iscrizione alla newsletter che deve essere utilizzato in diversi contesti sul tuo sito. Potresti volerlo visualizzare sull'intera larghezza della pagina in una pagina di registrazione, ma in una colonna divisa in una pagina con altri contenuti.

Come mostrato in questa demo, con le query sui contenitori puoi modificare le proprietà come le dimensioni del carattere, il padding e il layout dell'elemento in base agli attributi del contenitore più vicino, indipendentemente dalle dimensioni della finestra.

Configurazione di una query container

A differenza delle query supporti, le query sui contenitori sono stabilite in due parti:

1. Definisci un contenitore.
2. Scrivi stili per un elemento secondario da applicare quando un container principale corrisponde alle condizioni della query.

Definizione di un container

Puoi definire un contenitore utilizzando la proprietà container-type.

.my-container-element {   container-type: inline-size; } 

Un container-type di inline-size consente di eseguire query sull'asse inline del contenitore.

Per eseguire query su entrambi gli assi inline e block, utilizza container-type: size.

main, .my-component {   container-type: size; } 

Entrambi i valori di container-type applicano diversi tipi di contenimento delle dimensioni. Il contenimento Inline-size su un elemento impedisce ai relativi discendenti di influire sulla sua dimensione in linea.

Un elemento con contenimento size impedisce ai suoi discendenti di influire sulle sue dimensioni sia nell'asse del blocco che in quello in linea.

In questo esempio puoi vedere come il contenimento delle dimensioni può influire sull'elemento a cui viene applicato.

Poiché le dimensioni non verranno determinate in base a quelle degli elementi secondari (l'elemento <p>), il contenitore verrà compresso a meno che non gli venga assegnata una dimensione esplicita impostando le dimensioni (ovvero inline-size, block-size, aspect-ratio) o inserendolo in un layout con dimensioni esplicite.

Condizioni di query sui container

Una volta stabilito un contenitore, puoi aggiungere una condizione, racchiusa tra parentesi, che deve essere vera affinché gli stili all'interno della query del contenitore vengano applicati. Per le query sulle dimensioni dei contenitori, che si basano sulle dimensioni degli elementi predecessori, la condizione è composta da quanto segue:

• una funzionalità di taglia: width, height, inline-size, block-size, aspect-ratio o orientation,
• un operatore di confronto (ovvero >, <, =, >=),
• e un valore di lunghezza.

.my-container-element {   container-type: inline-size; }  @container (inline-size > 30em) {   .my-child-element {     /* styles to apply when .my-container-element is wider than 30em */   } } 

Le condizioni delle funzionalità relative alle taglie possono essere scritte anche con i due punti e un singolo valore da testare.

@container (orientation: landscape) {   /*...*/ }  @container (min-width: 300px) {   /*...*/ } 

Puoi anche combinare più condizioni utilizzando parole chiave come and e or o concatenando più condizioni con gli operatori.

@container (inline-size > 40em) and (orientation: landscape)  {   /*...*/ }  @container (height > 25vh) or (orientation: portrait) {   /*...*/ }  @container ( 10em <= width <= 500px) {   /*...*/ } 

Assegnazione dei nomi ai container

Per scegliere come target container specifici, anche se non sono l'antenato più vicino, puoi assegnare un nome ai container con la proprietà container-name. Poi puoi fare riferimento al nome del contenitore che vuoi interrogare prima di definire le condizioni.

.sidebar {   container-name: main-sidebar;   container-type: inline-size; }  @container main-sidebar (inline-size > 20em)  {   .button-group {     display: flex;     padding-inline: 1.25em;   } } 

Il contenitore denominato deve comunque essere un elemento principale degli elementi a cui viene applicato lo stile.

Utilizzare la notazione abbreviata con la proprietà container

La proprietà container ti consente di utilizzare una sintassi abbreviata per definire un contenitore e specificarne il tipo.

.sidebar {   container: main-sidebar / inline-size; } 

Il nome del contenitore precede la barra, mentre il tipo di contenitore segue la barra.

Unità di query sui container

All'interno dei contenitori hai anche accesso alle unità di lunghezza relative. In questo modo, i componenti che possono esistere in contenitori diversi sono più flessibili, poiché le lunghezze relative si adattano alle dimensioni del contenitore.

Qui, l'unità di lunghezza del contenitore cqi (1% delle dimensioni inline di un contenitore di query) viene utilizzata per il padding del pulsante.

.container {   container: button-container / inline-size; }  .one {   inline-size: 30vw; }  .two {   inline-size: 50vw; }  button {   padding: 2cqi 5cqi; } 

A entrambi i pulsanti sono state applicate le stesse unità relative, ma poiché le unità sono relative alle dimensioni del contenitore, il secondo pulsante ha più spaziatura interna a causa del contenitore più grande.

Query sui container nidificate

Puoi nidificare le query sui contenitori all'interno dei selettori.

.my-element {   display: grid;   padding: 1em 2em;    @container my-container (min-inline-size: 22em) {     /* styles to apply when element's container is wider than 22em */   } }  /* equivalent to */ .my-element {   display: grid;   padding: 1em 2em; }  @container my-container (min-inline-size: 22em) {   .my-element {      /* styles to apply when element's is wider than 22em */   } } 

Oppure nidificarli all'interno di altre query contenitore o regole @.

@container my-container (min-inline-size: 22em) {   .my-element {       /* styles to apply when element's is wider than 22em */   } } 

@layer base {   @container my-container (min-inline-size: 22em) {     .my-element {     /* styles to apply */     }   } } 

Verifica la tua comprensione