Introduzione alle CSS Container Queries

CSS Container Queries: la nuova era del responsive web design

by Janeth Kent Date: 14-07-2022 css design

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi.
Va da se che creare una versione del sito web per ogni risoluzione e nuovo dispositivo sarebbe poco pratico, se non impossibile.
Quindi, come possiamo risolvere questo problema?

Il responsive web design, noto anche come RWD, risponde a questa domanda.
Nel corso del tempo, abbiamo assistito a un cambiamento nel modo in cui gli sviluppatori si avvicinavano al concetto di responsive web design, dall'utilizzo di tabelle per i layout a layout dipendenti dalla risoluzione, alla creazione di una versione solo mobile di un sito web o alla sua collocazione in un sottodominio, fino all'utilizzo di media queries per definire le modifiche in base a specifici breakpoint.

Tuttavia, un nuovo approccio o paradigma alla progettazione responsive si sta affacciando ancora una volta e segue un modello di sviluppo guidato dai componenti (CDD).
Il CDD non è un concetto nuovo; per decenni la modularizzazione è stata un principio fondamentale dell'ingegneria del software.

In questo articolo parleremo delle query container e di come queste utilizzino il concetto di CDD per cambiare il modo in cui viene realizzato il responsive design. Impareremo anche a usare e sperimentare le query container sul browser, dato che non sono ancora completamente disponibili.

 

Cosa sono le query container?

 

Ecco una rapida definizione: le query contenitore specificano le modifiche a un elemento in relazione al suo contenitore o elemento genitore, anziché rispetto al viewpoint (dimensione dello schermo).

Le query contenitore consentono agli sviluppatori di affrontare il concetto di responsive dal punto di vista dei componenti nei quali gli elementi di una pagina sono progettati per adattarvisi come singole unità. Ciò significa che, indipendentemente dalla posizione di questi elementi nella pagina, essi si regoleranno in base alle dimensioni dell'elemento genitore e non a quelle dell'intera pagina.

L'impostazione della proprietà container su un elemento consente il controllo dell'elemento stesso.

In questo modo, un elemento e il suo contenuto sono indipendenti dal resto dell'albero del documento.

Ciò consente al browser di ricalcolare il layout, lo stile, il colore, le dimensioni o qualsiasi combinazione per un'area specifica del DOM anziché per l'intera pagina, con conseguente miglioramento delle prestazioni.

Le query container offrono un approccio nuovo e rinnovato del concetto di responsive; tuttavia, non sostituiscono in alcun modo le media query, ma sono da considerarsi una novità interessante nelle possibilità del disegno responsive.

 

Come usare le query container

 

Le query container sono ancora in fase sperimentale, pertanto non è ancora possibile utilizzarle in tutti i beowser. Tuttavia, possiamo usarle in Google Chrome Canary abilitando il flag della funzione CSS container queries in chrome://flags. Vediamo come fare:

1. Scaricare il browser Chrome Canary qui, quindi procedere all'installazione.

2. Nella barra di ricerca, digitate chrome://flags per visualizzare tutte le funzioni sperimentali.

3. Cercate "Enable CSS Container Queries" e attivatelo. Una volta abilitate le query dei container, si riceverà una notifica automatica di "Riavvia browser"; è sufficiente fare clic sul bottone Riavvia e le query container saranno abilitate.

In alternativa, è possibile utilizzare un polyfill di chrome labs che sfrutta il resizeObserver.

Quali problemi risolvono le query container?

Le query container offrono una soluzione unica per gli sviluppatori che lavorano su progetti di grandi dimensioni in cui diversi componenti compongono diverse parti della pagina web. Permettono ai componenti di modificare il loro comportamento per adattarsi al contesto in cui sono inseriti. In questo modo, i componenti possono essere utilizzati più volte, rendendoli realmente riutilizzabili.

Molti siti web hanno elementi che devono cambiare il loro layout in base alla dimensione disponibile del contenitore. Non sempre questo è legato alle dimensioni del viewport, ma piuttosto alla posizione del singolo elemento nel layout. Le query dei contenitori forniscono una soluzione che consente agli sviluppatori di modificare lo stile e il layout dei componenti in base alla larghezza disponibile del contenitore o dell'elemento padre.

Ecco un esempio per capire le potenzialità delle query container:

Nota: assicurarsi di visualizzare questo esempio in Chrome Canary con le query container abilitate.

Nota: assicurarsi di visualizzare questo esempio in Chrome Canary con le query container abilitate.

Nel esempio, si può vedere una semplice shopping card che si ridimensiona e si adatta a qualsiasi layout e contenitore. Il contenitore ha una larghezza del 100%, il che significa che il componente "card" avrà una larghezza di 1600px e di 2040px con una viewport a 2040px.

Ora, immaginiao di volere che il che il nostro contenitore abbia un aspetto leggermente diverso in corrispondenza a dei breakpoints. Potremmo farlo con le media queries, ma sarebbe abbastanza macchinoso ed implicherebbe il dover controllare constantemente le modifiche effettuate rispetto alle dimensioni dello schermo per poi regolare il nostro componente in base a tali dimensioni.

Sebbene questo possa non sembrare un inconveniente, porterebbe rapidamente all'uso di un numero elevato di media queries, perché dovremmo assicurarci che tutti gli elementi della pagina, non solo il componente della scheda, si adattino alle dimensioni dello schermo.

È qui che entrano in gioco le query contenitore.

Ecco la struttura HTML di base del nostro esempio. Vediamo poi come trasformarla in un contenitore:

 
//HTML Code
<div "container">
<div "shopping-card">
<div "img-container">
</div>
<div "product-info">
</div>
</div>
</div>

Nota: questa è solo la struttura del nostro documento HTML. Consultare CodePen per il codice completo.

Per raggiungere il nostro scopo, occorre innanzitutto rendere l'elemento padre un contenitore, impostando la proprietà container sullo stesso.
La proprietà container accetta due valori: container-type e container-name.

Notate come l'elemento con la classe .shopping-card è racchiuso da un elemento padre.
Questo per l'appunto, è il nostro contenitore padre in base al quale la nostra "shopping-card" regolerà le sue dimensioni, il layout e gli stili in base alle meta-informazioni di questo elemento.

Procediamo applicando al nostro contenitore padre un "container".

 
//CSS Code 
.container { container: inline-size;}
 

Impostiamo la proprietà container su inline-size perché vogliamo che il controllo delle dimensioni avvenga sull'asse inline (inline-axis).

La proprietà container e il suo valore sono impostati sulla nostra classe .container, che trasforma automaticamente l'elemento container in un contenitore interrogabile. Ora possiamo apportare modifiche all'elemento "shopping-card" ogni volta che cambia la dimensione del nostro elemento contenitore.

Possiamo modificare lo stile o il layout dell'elemento shopping-card in determinati punti breakpoint. Si possono impostare i breakpoints in modo simile alle media-queries.

Esaminando i breakpoints del nostro esempio in codepen, vediamo come le query contenitore gestiscono le modifiche in base ai breakpoint e come le query contenitore si relazionino alle media queries.

Nel nostro esempio, abbiamo iniziato costruendo l'aspetto del nostro componente shopping-card quando il suo contenitore genitore ha una larghezza inferiore a 200px.

Vogliamo che abbia questo aspetto:



Introduzione alle CSS Container Queries
 

Questo sarebbe il punto di partenza per il nostro componente. Poiché il suo contenitore padre è ora un container che può essere interrogato, possiamo iniziare ad apportare modifiche al layout e allo stile in diversi breakpoints, a seconda della larghezza del contenitore padre.

Per farlo, impostiamo i breakpoint. Il primo punto breakpoint, come avevamo accennato è definito a partire da una larghezza minima di 200px (200px o superiore) del nostro contenitore padre.

Vogliamo ora che il nostro container abbia questo aspetto:



Introduzione alle CSS Container Queries
 

Qui il codice:

@container size(min-width:200px){ 
.shopping-card{        
flex-direction:column;        
padding:1.5em;    
}    
.img-container{        
width:100%;    
}     
h1{        
text-align:left;        
font-size:1.2em;    
}    
p{        
display:block;       
width:90%;    
}          
.btns-container{        
display:block;    
}    
.btn{        
padding:.3em 1.5em;    
}    
.see-more{        
display:none;    
}
}

Impostiamo ora un altro breakpoint per fa si che "shopping-card" abbia un aspetto leggermente diverso.

Questo procedimento si ripeterà a ogni nuovo breakpoint impostato.

 
@container size(min-width:300px){      
.shopping-card{          
//make some changes      
{  
}
 
@container size(min-width:600px){      
.shopping-card{          
//define some more changes here.     
{  
}
 

Le query container ci permettono di creare componenti dell'interfaccia utente più robusti e riutilizzabili, in grado di adattarsi a quasi tutti i contenitori e layout, come mostrato nell'esempio.

Poiché le media queries si basano sul viewport, sarebbe difficile ottenere un layout in cui il nostro elemento shopping-card venga visualizzato in due parti della stessa pagina web, una in cui ha spazio sufficiente per espandersi in larghezza e una in cui non ha altrettanto spazio.

Mi spiego meglio:

 
@media screen and(min-width:300px){   
.shopping-card{          
//define shopping-card styles  
{  
}
 

Quando il viewport ha una larghezza minima di 300 px, indipendentemente dalla posizione degli elementi della shopping card nella pagina, entrambi gli elementi della shopping card avranno lo stesso aspetto in termini di dimensioni, stile e layout. Ricordiamo che ogni elemento del biglietto ha una quantità di spazio diversa.

Seguendo l'esempio delle media query, si può notare come questo vanifichi lo scopo di avere un componente riutilizzabile che abbia un bell'aspetto indipendentemente dalla sua collocazione.

Con le query container, di contro, il componente scheda potrebbe essere collocato in una colonna stretta o larga della pagina web e avrebbe comunque un aspetto gradevole e reattivo. Inoltre, se nel nostro esempio di query contenitore c'è spazio a sufficienza, il componente viene visualizzato con un layout a due colonne; altrimenti, il layout è a blocchi.

Nel nostro esempio precedente, le query container ci hanno aiutato a raggiungere questo obiettivo:

Un layout a blocchi per le sezioni più piccole della pagina web:



Introduzione alle CSS Container Queries
 

Un layout a due colonne per quando avremo più spazio:



Introduzione alle CSS Container Queries
 

E di seguito potremmo visualizzare più informazioni:



Introduzione alle CSS Container Queries
 

Gli esempi precedenti mostrano la potenza delle query container e la loro importanza in un mondo di sviluppo basato sui componenti. Ora che abbiamo una conoscenza di base delle query contenitore e del loro funzionamento, esaminiamo le loro proprietà per sapere quando usarle.

 

Proprietà delle query container

 

container: questa proprietà abbreviata consente di impostare sia il tipo di contenitore che il nome del contenitore.

container-type: assegna un query container ad un elemento. A seconda del valore, i discendenti possono interrogare gli aspetti del layout, dello stile e dello stato dell'oggetto.

La proprietà del tipo di contenitore può avere i seguenti valori:

size (dimensione): Crea un query container che supporta query dimensionali sia sull'asse in linea che su quello di blocco. L'elemento contiene anche le dimensioni, del layout e dello stile.

inline-size: Crea un query container che supporta le query dimensionali sull'asse inline. L'elemento riceve anche dimensioni, layout e stile.

block-size: Crea un query container che supporta le query dimensionali sull'asse del blocco. All'elemento vengono date anche le dimensioni, lo stile.

style : Consente di eseguire comandi di stile definendo un query container.

state (Stato): Consente di eseguire query di stato definendo un query container.

container-name: Imposta il nome di un elemento contenitore.

Nota: Le proprietà citate seguono la bozza di specifica di livello 3 per il container CSS.

 

Per concludere

 

Le CSS Container Queries sono un approccio innovativo in grado di superare le media queries legate al viewport. Per molti anni, gli sviluppatori hanno desiderato la possibilità di modificare le dimensione di un elemento in base a quelle dell'elemento padre.

Fortunatamente, le CSS Container Queries sui contenitori sono in dirittura di arrivo. Anche se questa nuova funzionalità non è ancora pienamente supportata, vale la pena sapere che in un futuro prossimo sará implementata.

Speriamo di vedere a breve labozza finale delle specifiche di questa funzionalitá!

 
by Janeth Kent Date: 14-07-2022 css design visite : 1227  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Nuove unità grafiche della finestra - CSS

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web. Il progetto ha 15 aree di…

Come funziona il GAP in CSS Grid e flexbox

Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

Realizzare banner animati con CSS3

Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

I 10 migliori generatori di gradienti CSS

Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

15 effetti di testo avanzati con CSS3

Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

15 esempi di trasformazioni 3D con CSS

Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi,…

8 strumenti per formattare ed ottimizzare i CSS

La fase di ottimizzazione dei file CSS è forse una delle piú importanti per velocizzare il caricamento di un sito web o blog. Per raggiungere questo obiettivo è necessario ripulire il…

Clicky