Impara a usare le CSS Container Queries per creare layout responsivi e adattivi che rispondono alle dimensioni del loro contenitore, non solo alla viewport.
CSS Container Queries: una guida completa alla definizione delle query del contenitore
Il web design responsivo si è evoluto in modo significativo. Inizialmente, le media query erano la pietra miliare, consentendo ai layout di adattarsi in base alle dimensioni della viewport. Tuttavia, con l'aumentare della complessità dei siti web e dell'approccio basato su componenti, è emersa la necessità di un approccio più granulare e flessibile. È qui che entrano in gioco le CSS Container Queries.
Cosa sono le CSS Container Queries?
Le CSS Container Queries consentono agli sviluppatori di applicare stili a un elemento in base alle dimensioni o allo stato del suo elemento contenitore, anziché della viewport. Questo cambiamento fondamentale permette la creazione di componenti realmente riutilizzabili e adattabili che possono integrarsi senza problemi in vari contesti all'interno di una pagina web.
Immagina un componente card che deve adattare il suo layout a seconda che sia posizionato in una barra laterale stretta o in un'ampia area di contenuto principale. Con le container query, questo adattamento diventa semplice, garantendo una presentazione ottimale indipendentemente dal contesto circostante.
Perché usare le Container Queries?
- Migliore riutilizzabilità dei componenti: I componenti diventano veramente indipendenti e adattabili, semplificando la manutenzione e promuovendo la coerenza tra le diverse parti di un sito web.
- Controllo più granulare: A differenza delle media query, che dipendono dalla viewport, le container query offrono un controllo dettagliato sullo stile in base all'ambiente specifico di un componente.
- Sviluppo semplificato: Riducono la necessità di complesse soluzioni JavaScript per gestire lo stile dei componenti in base alla loro posizione nel layout.
- Migliore esperienza utente: Offrono esperienze ottimali su diversi dispositivi e dimensioni dello schermo, garantendo che il contenuto sia sempre presentato nel modo più appropriato.
Definire un contenitore
Prima di poter utilizzare le container query, è necessario definire quale elemento fungerà da contenitore. Questo viene fatto utilizzando la proprietà container-type.
Proprietà container-type
La proprietà container-type specifica se un elemento è un contenitore di query e, in tal caso, di che tipo di contenitore si tratta. Accetta i seguenti valori:
size: Le condizioni della query del contenitore si baseranno sulla sua inline-size (larghezza nelle modalità di scrittura orizzontale, altezza in quelle verticali) e sulla sua block-size (altezza nelle modalità di scrittura orizzontale, larghezza in quelle verticali). Questa è l'opzione più comune e versatile.inline-size: Le condizioni della query del contenitore si baseranno sulla sua inline-size (larghezza nelle modalità di scrittura orizzontale, altezza in quelle verticali).normal: L'elemento non è un contenitore di query. Questo è il valore predefinito.style: L'elemento è un contenitore di stile. I contenitori di stile espongono le proprietà personalizzate definite su di essi agli elementi discendenti utilizzando la query@container style(). Questo è utile per applicare stili basati su proprietà personalizzate.
Esempio:
.container {
container-type: size;
}
Questo frammento di codice definisce un elemento con la classe container come contenitore di query, rendendo le sue dimensioni disponibili per le container query.
In alternativa, è possibile utilizzare container: inline-size o container: size. La proprietà shorthand container può impostare sia container-type che container-name in un'unica dichiarazione. Il nome del contenitore viene utilizzato per indirizzare un contenitore specifico quando si annidano i contenitori.
Utilizzare le Container Queries
Una volta definito un contenitore, è possibile utilizzare la at-rule @container per applicare stili in base alle sue dimensioni o al suo stato.
At-Rule @container
La at-rule @container è simile alla at-rule @media, ma invece di mirare alla viewport, si rivolge a un contenitore specifico. La sintassi è la seguente:
@container [container-name] (condition) {
/* Stili da applicare quando la condizione è soddisfatta */
}
container-name(Opzionale): Se hai dato un nome al tuo contenitore usando la proprietàcontainer-name, puoi specificarlo qui per mirare a quel contenitore specifico. Se omesso, si applicherà al contenitore antenato più vicino.condition: La condizione che deve essere soddisfatta affinché gli stili vengano applicati. Può basarsi sulla larghezza, l'altezza o altre proprietà del contenitore.
Esempio:
.card {
display: flex;
flex-direction: column;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card__image {
width: 40%;
}
.card__content {
width: 60%;
}
}
In questo esempio, l'elemento .card passerà da un layout a colonna a un layout a riga quando il suo contenitore sarà largo almeno 400px. Anche gli elementi .card__image e .card__content regoleranno di conseguenza le loro larghezze.
Unità di misura delle Container Query
Le container query introducono nuove unità di misura che sono relative alle dimensioni del contenitore:
cqw: 1% della larghezza del contenitore.cqh: 1% dell'altezza del contenitore.cqi: 1% della dimensione inline del contenitore.cqb: 1% della dimensione block del contenitore.cqmin: Il valore minore tracqiecqb.cqmax: Il valore maggiore tracqiecqb.
Queste unità consentono di creare stili che sono realmente relativi alle dimensioni del contenitore, rendendo i componenti ancora più adattabili.
Esempio:
.element {
font-size: 2cqw;
padding: 1cqh;
}
In questo esempio, la dimensione del font dell'elemento .element sarà il 2% della larghezza del contenitore e il suo padding sarà l'1% dell'altezza del contenitore.
Esempi del mondo reale
Esploriamo alcuni esempi pratici di come le container query possano essere utilizzate per creare componenti responsivi e adattabili.
Esempio 1: Componente Card
Consideriamo un componente card che mostra informazioni su un prodotto. Questo componente potrebbe dover adattare il suo layout a seconda di dove viene posizionato nella pagina.
HTML:
CSS:
.container {
container-type: inline-size;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
padding: 16px;
}
.card__image {
width: 100%;
margin-bottom: 16px;
}
.card__title {
font-size: 1.5rem;
margin-bottom: 8px;
}
@container (min-width: 500px) {
.card {
flex-direction: row;
}
.card__image {
width: 40%;
margin-bottom: 0;
margin-right: 16px;
}
.card__content {
width: 60%;
}
}
In questo esempio, l'elemento .container è definito come un contenitore inline-size. Quando il contenitore è largo meno di 500px, il componente card mostrerà l'immagine e il contenuto in un layout a colonna. Quando il contenitore è largo 500px o più, il componente card passerà a un layout a riga, con l'immagine a sinistra e il contenuto a destra. Ciò garantisce che il componente card abbia un bell'aspetto indipendentemente da dove viene posizionato nella pagina.
Esempio 2: Menu di navigazione
Un altro caso d'uso comune per le container query è l'adattamento di un menu di navigazione in base allo spazio disponibile.
HTML:
CSS:
.nav-container {
container-type: inline-size;
width: 100%;
background-color: #f0f0f0;
}
.nav {
padding: 16px;
}
.nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.nav__item {
margin-bottom: 8px;
}
.nav__link {
text-decoration: none;
color: #333;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
@container (max-width: 400px) {
.nav__list {
flex-direction: column;
}
.nav__item {
margin-bottom: 16px;
}
.nav__link {
display: block;
width: 100%;
text-align: center;
}
}
In questo esempio, l'elemento .nav-container è definito come un contenitore inline-size. Quando il contenitore è largo 400px o meno, il menu di navigazione passerà a un layout a colonna, con ogni link che occupa l'intera larghezza del contenitore. Quando il contenitore è più largo di 400px, il menu di navigazione mostrerà i link in una riga, con spazio tra di loro. Ciò consente al menu di navigazione di adattarsi a diverse dimensioni e orientamenti dello schermo.
Annidamento di contenitori
Le container query possono essere annidate, consentendo un controllo ancora più complesso e granulare sullo stile. Per mirare a un contenitore specifico durante l'annidamento, è possibile utilizzare la proprietà container-name per dare nomi univoci ai contenitori. Quindi, nella at-rule @container, è possibile specificare il nome del contenitore che si desidera targettizzare.
Esempio:
Contenuto
.outer-container {
container-type: inline-size;
container-name: outer;
}
.inner-container {
container-type: inline-size;
container-name: inner;
}
@container outer (min-width: 500px) {
.inner-container {
background-color: lightblue;
}
}
@container inner (min-width: 300px) {
p {
font-size: 1.2rem;
}
}
In questo esempio, .outer-container è chiamato "outer" e .inner-container è chiamato "inner". La prima at-rule @container si rivolge al contenitore "outer" e applica un colore di sfondo a .inner-container quando il contenitore "outer" è largo almeno 500px. La seconda at-rule @container si rivolge al contenitore "inner" e aumenta la dimensione del font dell'elemento p quando il contenitore "inner" è largo almeno 300px.
Supporto dei browser
Le container query godono di un supporto eccellente e in crescita da parte dei browser. La maggior parte dei browser moderni supporta pienamente le funzionalità container-type, container-name e @container. È sempre una buona idea controllare Can I use per le informazioni di compatibilità più recenti.
Per i browser più vecchi che non supportano le container query, è possibile utilizzare i polyfill per fornire un supporto di fallback. Tuttavia, è importante notare che i polyfill potrebbero non replicare perfettamente il comportamento delle container query native e possono aumentare il tempo di caricamento della pagina.
Migliori pratiche
Ecco alcune migliori pratiche da tenere a mente quando si lavora con le container query:
- Partire dal Mobile-First: Progetta i tuoi componenti prima per le dimensioni del contenitore più piccole, e poi usa le container query per migliorare progressivamente il layout per contenitori più grandi.
- Usa nomi di contenitore significativi: Se stai annidando contenitori, usa nomi descrittivi che indichino chiaramente lo scopo di ogni contenitore.
- Evita query eccessivamente complesse: Mantieni le tue container query semplici e mirate. Troppe query complesse possono rendere il codice difficile da capire e mantenere.
- Testa a fondo: Testa i tuoi componenti in una varietà di dimensioni e contesti di contenitori per assicurarti che si adattino correttamente.
- Considera le prestazioni: Sii consapevole dell'impatto sulle prestazioni delle container query, specialmente quando si utilizzano query complesse o un gran numero di contenitori.
Considerazioni sull'accessibilità
Sebbene le container query si concentrino principalmente sulle regolazioni del layout visivo, è fondamentale considerare l'accessibilità per garantire che i componenti rimangano utilizzabili da tutti.
- Mantieni la struttura semantica: Assicurati che la struttura HTML sottostante rimanga semantica e accessibile, indipendentemente dalle dimensioni del contenitore.
- Testa con tecnologie assistive: Testa i tuoi componenti con screen reader e altre tecnologie assistive per verificare che il contenuto sia ancora accessibile e comprensibile.
- Fornisci contenuti alternativi: Se le dimensioni del contenitore alterano in modo significativo il contenuto, considera di fornire contenuti o meccanismi alternativi per garantire che gli utenti con disabilità possano accedere alle informazioni.
Oltre le dimensioni: State Queries
Mentre le container query basate sulle dimensioni sono le più comuni, il futuro delle container query si estende oltre le semplici dimensioni. Ci sono specifiche e proposte emergenti per style queries e state queries.
Le Style Queries consentono di applicare stili basati su proprietà personalizzate definite sul contenitore. Ciò consente uno stile potente basato su dati e configurazioni dinamiche.
Le State Queries permetterebbero di interrogare lo stato di un contenitore, ad esempio se è in stato di focus, hover o se ha una classe specifica applicata. Questo potrebbe aprire ancora più possibilità per componenti adattivi che rispondono all'interazione dell'utente.
Conclusione
Le CSS Container Queries sono uno strumento potente per creare componenti web responsivi e adattabili. Permettendo di applicare stili agli elementi in base alle dimensioni o allo stato del loro elemento contenitore, le container query offrono un approccio al design responsivo più granulare e flessibile rispetto alle media query tradizionali. Man mano che il supporto dei browser continua a migliorare, le container query sono destinate a diventare una parte essenziale del toolkit di ogni sviluppatore web. Abbracciale per costruire esperienze web più robuste, riutilizzabili e user-friendly per un pubblico globale.
Le possibilità sbloccate dalle container query vanno ben oltre semplici aggiustamenti di layout. Esse consentono la creazione di componenti consapevoli del contesto che possono adattarsi a una varietà di situazioni, risultando in un'esperienza utente più fluida e intuitiva. Mentre esplori questa potente funzionalità, considera come può migliorare la riutilizzabilità, la manutenibilità e l'adattabilità dei tuoi progetti web, contribuendo in definitiva a un web più inclusivo e accessibile a livello globale.
Sfruttando la potenza delle container query, puoi creare esperienze web che non sono solo visivamente accattivanti, ma anche altamente adattabili e incentrate sull'utente, soddisfacendo le diverse esigenze di un pubblico globale.