Media query CSS

Il lin­guag­gio CSS (“Cascading Style Sheets”, in italiano “fogli di stile a cascata”), insieme a HTML e Ja­va­Script, rap­pre­sen­ta la struttura di base per lo sviluppo di siti web moderni. Il CSS è un lin­guag­gio di pro­gram­ma­zio­ne, ma non descrive i singoli passaggi necessari per risolvere un problema. Si definisce invece un obiettivo da rag­giun­ge­re. Il CSS è quindi un lin­guag­gio di­chia­ra­ti­vo simile a SQL. Parte dei CSS sono le co­sid­det­te media query, che in­ter­ro­ga­no le proprietà di un di­spo­si­ti­vo di output. Sono uti­liz­za­te per il re­spon­si­ve web design. Come funziona esat­ta­men­te?

Le media query CSS sono state in­tro­dot­te con la specifica CSS3. Una media query lega l’as­se­gna­zio­ne delle proprietà CSS di un elemento a una o più con­di­zio­ni del supporto. Nel caso più semplice, viene fatta una di­stin­zio­ne tra il supporto su cui l’in­for­ma­zio­ne viene vi­sua­liz­za­ta, ad esempio su uno schermo, una pagina stampata (che include l’output in formato PDF) oppure come testo letto ad alta voce:

Una media query CSS viene spe­ci­fi­ca­ta all’interno di un blocco di codice CSS usando una regola speciale '@media'. I selettori CSS e le regole in essi contenuti sono attivati solo nella con­di­zio­ne spe­ci­fi­ca­ta. Ad esempio, gli elementi che non possono essere vi­sua­liz­za­ti possono essere nascosti quando vengono emessi come pagina stampata:

Oltre il supporto da uti­liz­za­re, le media query CSS possono essere uti­liz­za­te per in­ter­ro­ga­re proprietà spe­ci­fi­che del ri­spet­ti­vo supporto. Queste query CSS sono quindi la ca­rat­te­ri­sti­ca tecnica centrale che ha reso davvero possibile il re­spon­si­ve web design.

Il re­spon­si­ve web design mira ad adattare la vi­sua­liz­za­zio­ne di una pagina web al ri­spet­ti­vo di­spo­si­ti­vo nel miglior modo possibile. Le media query sono usate per in­ter­ro­ga­re varie proprietà del di­spo­si­ti­vo di vi­sua­liz­za­zio­ne, le co­sid­det­te media feature. Tra le altre cose, è possibile definire regole di stile per diverse di­men­sio­ni dello schermo. Inoltre, regole di stile ot­ti­miz­za­te possono essere definite nel caso in cui un di­spo­si­ti­vo mobile sia inclinato.

Il­lu­stria­mo di seguito una pa­no­ra­mi­ca delle media feature at­tual­men­te più usate per il re­spon­si­ve design:

Vediamo alcuni esempi. Im­ma­gi­nia­mo il titolo prin­ci­pa­le di una pagina web. L’HTML fornisce l’elemento ‘h1’. Per prima cosa, per l’elemento h1 im­po­ste­re­mo le regole di stile in­di­pen­den­te­men­te dal di­spo­si­ti­vo di vi­sua­liz­za­zio­ne:

A questo punto, definiamo una media query che interroga la larghezza dello schermo. All’interno della query, spe­ci­fi­chia­mo le regole di stile che do­vreb­be­ro essere applicate al titolo a partire da questa larghezza. Nell’esempio specifico, au­men­tia­mo la di­men­sio­ne del carattere del titolo h1 sugli schermi che sono larghi almeno 1.024 pixel:

Notate che nell’esempio stiamo solo regolando la proprietà ‘font-size’ dell’in­te­sta­zio­ne h1. L’in­ter­li­nea è definita dalla proprietà ‘line-height’ come unità relativa e viene ereditata poiché non è espli­ci­ta­men­te so­vra­scrit­ta. Nell’esempio concreto, l’in­ter­li­nea dell’elemento h1 nello stato base è 24px * 1,25 = 30px. Su schermi larghi almeno 1.024 pixel, l’in­ter­li­nea pro­por­zio­na­le è pari a 36px * 1,25 = 45px.

Questa amalgama di regole di stile esistenti e appena definite è suggerita dal termine “cascading” (a cascata) della de­no­mi­na­zio­ne CSS, che sta a indicare che un elemento eredita regole di stile da elementi genitori o regole generali che sono già state definite. Di solito, si impostano le proprietà di base degli elementi e poi si so­vra­scri­vo­no se­let­ti­va­men­te le proprietà in de­ter­mi­na­te con­di­zio­ni.

Un altro esempio: im­ma­gi­nia­mo di voler mostrare tre elementi in un con­te­ni­to­re. Gli elementi sullo schermo di un di­spo­si­ti­vo mobile devono essere vi­sua­liz­za­ti uno sotto l’altro quando il di­spo­si­ti­vo è tenuto in posizione verticale. Quando si inclina il di­spo­si­ti­vo oriz­zon­tal­men­te, il layout dovrebbe cambiare in modo che gli elementi siano vi­sua­liz­za­ti fianco a fianco. Con il modulo flexbox layout e una media query CSS, che interroga l’orien­ta­men­to del di­spo­si­ti­vo, il layout può essere im­ple­men­ta­to in poche righe di HTML e CSS. Prima definiamo il con­te­ni­to­re e gli elementi contenuti nell’HTML:

Definiamo inoltre le seguenti regole CSS. Im­po­stia­mo la proprietà ‘display: flex’ sul con­te­ni­to­re e, per questo elemento, im­po­stia­mo con­di­zio­na­ta­men­te la proprietà ‘flex-direction’ tramite media query CSS. Quando il di­spo­si­ti­vo è in modalità di vi­sua­liz­za­zio­ne oriz­zon­ta­le, gli elementi sono vi­sua­liz­za­ti in fila, uno accanto all’altro; quando è in modalità verticale, gli elementi sono disposti in colonna, uno sotto l’altro:

Oltre alle di­men­sio­ni dello schermo e all’orien­ta­men­to del di­spo­si­ti­vo, possiamo anche in­ter­ro­ga­re la ri­so­lu­zio­ne fisica dello schermo tramite media query. Ciò è par­ti­co­lar­men­te in­te­res­san­te per vi­sua­liz­za­re immagini in pixel. Ad esempio, im­ma­gi­na­te che un logo sia di­spo­ni­bi­le in due versioni, ognuna ot­ti­miz­za­ta per schermi a bassa e alta ri­so­lu­zio­ne. Un semplice trucco per vi­sua­liz­za­re il logo ap­pro­pria­to in ogni caso è quello di mettere entrambe le varianti nella pagina. Con la media query CSS in­ter­ro­ghia­mo la ri­so­lu­zio­ne dello schermo e na­scon­dia­mo la versione non ne­ces­sa­ria tramite ‘display: none’. Questo approccio potrebbe apparire così im­ple­men­ta­to nel codice HTML e CSS:

Nelle spie­ga­zio­ni pre­ce­den­ti abbiamo parlato di “schermo” in ri­fe­ri­men­to alla larghezza di­spo­ni­bi­le sul supporto di output. Ciò è vero dal punto di vista con­cet­tua­le, ma a livello tecnico non è del tutto corretto. Il browser opera in­ter­na­men­te basandosi sul concetto di “viewport”. Affinché la larghezza di viewport cor­ri­spon­da ef­fet­ti­va­men­te alla larghezza dello schermo, è ne­ces­sa­rio inserire l’in­di­ca­zio­ne ‘meta-viewport’ nella sezione ‘<head>‘ dei file HTML. In assenza di questa in­di­ca­zio­ne, il sito viene vi­sua­liz­za­to sui di­spo­si­ti­vi mobili come se fosse su desktop, ma nel complesso con di­men­sio­ni estre­ma­men­te ridotte.

Nel re­spon­si­ve web design gli elementi devono adattarsi alla su­per­fi­cie dello schermo. Spesso si tratta di definire le di­men­sio­ni degli elementi in varie con­di­zio­ni. La specifica CSS ingloba una grande varietà di unità e, tra queste, l’unità di misura più semplice è si­cu­ra­men­te il pixel. Ad esempio, un’immagine da 1080p presenta di­men­sio­ni pari a 1.920 pixel di larghezza per 1.080 pixel di altezza.

Il pixel è un’unità assoluta e, per de­fi­ni­zio­ne, non si adatta allo spazio esistente. Vediamo un esempio per cui questa si­tua­zio­ne potrebbe rivelarsi un problema. Sup­po­nia­mo che un sito web contenga un’immagine con una larghezza di 1.920 pixel. Se definiamo questo valore per la larghezza dell’immagine tramite CSS, po­treb­be­ro ve­ri­fi­car­si anomalie nella vi­sua­liz­za­zio­ne su schermi piccoli, in cui l’immagine occupa uno spazio superiore a quello di­spo­ni­bi­le.

In questo esempio definiamo un’immagine in HTML con il tag ‘<img>‘:

Tramite CSS bloc­chia­mo la larghezza a 1.920 pixel:

In questo scenario sarebbe stato meglio uti­liz­za­re un’unità relativa al posto dei pixel. Fin dai primi tempi dei layout basati su tabella il CSS riconosce la per­cen­tua­le come unità relativa. Se im­po­stia­mo la larghezza dell’immagine tramite CSS su ‘100%’, l’immagine si adatta in modo fluido allo spazio esistente. Ciò funziona perché i valori per­cen­tua­li si ri­fe­ri­sco­no sempre all’elemento cir­co­scrit­to.

Abbiamo fatto un altro passo avanti verso il nostro obiettivo, ovvero quello di adattare la larghezza di un’immagine allo spazio di­spo­ni­bi­le. Tuttavia, abbiamo creato un nuovo problema: infatti, su uno schermo con una larghezza superiore a 1.920 pixel, l’immagine viene vi­sua­liz­za­ta in­gran­di­ta e quindi risulta pixelata. Per questo dobbiamo anche limitare la larghezza massima dell’immagine alle relative di­men­sio­ni effettive in pixel:

Oltre ai pixel e alla per­cen­tua­le, il CSS conosce una serie di altre unità. Le unità relative em, rem e vw, vh offrono tutte in­te­res­san­ti pos­si­bi­li­tà di utilizzo nel re­spon­si­ve design. Di seguito trovate una pa­no­ra­mi­ca delle unità CSS più usate per il re­spon­si­ve design con il relativo utilizzo:

In aggiunta alle semplici media query finora pre­sen­ta­te è possibile scrivere anche media query CSS complesse. A tale riguardo il CSS prevede l’uso degli operatori logici ‘and’, ‘or’ e ‘not’. Di seguito trovate un esempio di query complessa:

Oltre alle media feature già definite, che si possono in­ter­ro­ga­re tramite media query CSS, in futuro sarà di­spo­ni­bi­le una serie di altre in­te­res­san­ti fun­zio­na­li­tà. La specifica “CSS Media Queries Level 5” (CSS5) fornisce, tra le altre cose, le seguenti nuove opzioni di query:

Un’altra novità prevista con l’arrivo del CSS5 sono le co­sid­det­te container query. Grazie a queste query sarà possibile per la prima volta collegare le regole di stile per gli elementi alle proprietà del con­te­ni­to­re. Le container query sono quindi in con­trap­po­si­zio­ne con le media query CSS, che in­ter­ro­ga­no le proprietà globali del di­spo­si­ti­vo di vi­sua­liz­za­zio­ne. L’uso delle container query consente di gestire casi speciali, per i quali in passato si ricorreva a Ja­va­Script o a media query complesse.

In relazione al re­spon­si­ve web design e alle media query CSS si parla spesso di “brea­k­point” (in italiano: “punti di in­ter­ru­zio­ne”). Un brea­k­point è la larghezza definita dello schermo, per cui viene attivato un set di regole CSS, definito tramite media query CSS. Si possono vi­sua­liz­za­re i brea­k­point definiti su un sito web aprendo gli strumenti di sviluppo nel browser. Se è attiva la vi­sua­liz­za­zio­ne re­spon­si­ve, i brea­k­point vengono vi­sua­liz­za­ti come barre colorate sopra la pagina web.

Una pratica con­si­glia­ta ri­co­no­sciu­ta per il re­spon­si­ve web design è l’approccio Mobile first. Se il design e lo sviluppo di un sito web seguono questo approccio, vengono prima di tutto definite le in­for­ma­zio­ni di stile per gli schermi più piccoli. Queste de­fi­ni­zio­ni co­sti­tui­sco­no la struttura di base del design. Basandosi su di essa verranno definiti diversi brea­k­point per schermi pro­gres­si­va­men­te più grandi. All’interno dei brea­k­point vengono definite in modo selettivo nuove regole di stile per gli elementi e quindi vengono so­vra­scrit­te le regole esistenti per gli schermi più piccoli.

Si noti che seguendo l’approccio Mobile first non esiste un vero brea­k­point ‘small’. Le in­for­ma­zio­ni per i piccoli di­spo­si­ti­vi vengono definite sem­pli­ce­men­te senza brea­k­point.

All’interno dei brea­k­point vengono definite le regole di stile per gli elementi, la cui vi­sua­liz­za­zio­ne deve essere adattata a schermi di varie di­men­sio­ni. Pro­ba­bil­men­te avete già capito che questa cen­tra­liz­za­zio­ne della base di codice CSS di un progetto web co­sti­tui­sce un problema. Di solito è pre­fe­ri­bi­le rac­co­glie­re tutte le proprietà CSS di un elemento in un file separato.

Per modulare il codice CSS di un progetto, all’inizio venivano uti­liz­za­ti diversi pre­pro­ces­so­ri CSS. Forse i nomi dei linguaggi Sass, Less o Stylus vi suonano familiari. In seguito, con il progetto Node.js si è aggiunto il PostCSS, un post­pro­ces­so­re CSS. Tutte le tec­no­lo­gie men­zio­na­te con­sen­to­no di in­cap­su­la­re le media query CSS sotto un selettore CSS. In questo modo le regole di stile di un elemento possono essere definite col­let­ti­va­men­te per tutte le con­di­zio­ni dei supporti. Di seguito è riportato un esempio con Stylus.

File Stylus ‘text.styl’ per proprietà del testo:

File Stylus 'link.styl' per proprietà di link:

Il pro­ces­so­re Stylus traduce i file in CSS e raccoglie le regole media query CSS inserite sotto un unico brea­k­point. Il codice Stylus vi­sua­liz­za­to viene tradotto nel seguente codice CSS:

L’approccio di in­cap­su­la­re le media query CSS all’interno delle regole di stile di un elemento ed ela­bo­rar­le tramite il pro­ces­so­re CSS è piuttosto ef­fi­cien­te. Tuttavia, questo costringe ancora lo svi­lup­pa­to­re a passare con­ti­nua­men­te tra i livelli HTML e CSS. C’è anche la necessità di assegnare nomi di classe univoci agli elementi in HTML. La logistica ri­sul­tan­te porta a una sgradita com­ples­si­tà. È qui che entrano in gioco i framework di utilità CSS, una tec­no­lo­gia influente al giorno d’oggi.

Un framework di utilità CSS collega le proprietà CSS atomiche ai brea­k­point. Le classi CSS ri­sul­tan­ti possono essere assegnate a qualsiasi elemento nell’HTML. Questo permette di definire layout e com­po­nen­ti reattivi solo in HTML, senza bisogno di usare codice CSS. L’uso di un framework di utilità CSS consente una rapida pro­to­ti­pa­zio­ne ed è perfetto per lo sviluppo di com­po­nen­ti. È per questa ragione che i framework di utilità CSS vengono spesso impiegati in com­bi­na­zio­ne con tec­no­lo­gie orientate ai com­po­nen­ti, come React e Vue.

Con­si­de­ria­mo un altro esempio preso in prestito dal framework di utilità CSS Tachyons. Date un’occhiata al seguente codice CSS. Definiamo in­nan­zi­tut­to classi da ‘mw1’ a ‘mw3’ che limitano la larghezza massima di un elemento qualsiasi ai valori compresi tra ‘1rem’ e ‘3rem’. Inoltre, definiamo all’interno dei brea­k­point già pre­sen­ta­ti, ‘medium’ e ‘large’, le cor­ri­spon­den­ti classi CSS, che con­ten­go­no l’ab­bre­via­zio­ne del ri­spet­ti­vo brea­k­point nel loro nome:

Grazie a queste classi CSS possiamo scrivere elementi reattivi to­tal­men­te in HTML. Il seguente frammento di codice HTML definisce un’immagine che ha una larghezza massima di ‘1rem’ su schermi piccoli. L’immagine si adatta au­to­ma­ti­ca­men­te alla larghezza di­spo­ni­bi­le sullo schermo. Su schermi di medie di­men­sio­ni l’elemento accetta un massimo di ‘2rem’, su schermi grandi un massimo di ‘3rem’.

I framework di utilità CSS de­fi­ni­sco­no un grande insieme di classi atomiche e ogni classe specifica solo una proprietà CSS. Oltre alle di­men­sio­ni di un elemento, si tratta di in­for­ma­zio­ni sulla ti­po­gra­fia, la co­lo­ra­zio­ne e pressoché ogni altra proprietà possibile. Per ogni proprietà atomica, un framework di utilità CSS contiene classi per ciascun brea­k­point definito. Com­bi­nan­do diverse classi, quasi tutti gli elementi com­ple­ta­men­te reattivi possono essere uniti.

Il framework Tachyons descritto sopra è in cir­co­la­zio­ne da diversi anni e non viene più svi­lup­pa­to at­ti­va­men­te. Tuttavia, per via della sua relativa sem­pli­ci­tà, vale la pena prendere in con­si­de­ra­zio­ne Tachyons per imparare il re­spon­si­ve web design. Il modo più semplice per capire è osservare i com­po­nen­ti di Tachyons. Questi sono elementi di esempio che sono definiti esclu­si­va­men­te usando classi di utilità.

Il suc­ces­so­re spi­ri­tua­le di Tachyons è la sua variante moderna, Tail­win­dCSS, che offre alcuni vantaggi rispetto a Tachyons. Il progetto è inoltre svi­lup­pa­to at­ti­va­men­te e supporta molti sistemi di sviluppo front end popolari. Inoltre, Tail­win­dCSS può essere com­ple­ta­men­te per­so­na­liz­za­to per le esigenze spe­ci­fi­che di un progetto. Tutte le pre­im­po­sta­zio­ni come i brea­k­point, la scala delle di­men­sio­ni dei caratteri e simili possono essere con­fi­gu­ra­te fa­cil­men­te.

Per quanto i framework di utilità CSS siano utili per lavorare, hanno anche un grande svan­tag­gio: può essere ne­ces­sa­rio un grande insieme di classi atomiche per definire un elemento. Inoltre, per im­po­sta­zio­ne pre­de­fi­ni­ta, il file di codice sorgente CSS contiene classi per tutte le com­bi­na­zio­ni di valori di proprietà CSS e brea­k­point. Nel caso di Tail­win­dCSS ci sono migliaia di classi, il che provoca un aumento di diversi megabyte delle di­men­sio­ni del file CSS non compresso, uno stato in­so­ste­ni­bi­le dal punto di vista delle pre­sta­zio­ni.

For­tu­na­ta­men­te Tail­win­dCSS vi pone rimedio in due modi. Da un lato, il framework riconosce l’istru­zio­ne ‘@apply’, che è usata per riunire sotto un nuovo nome di classe le com­bi­na­zio­ni di classi di utilità usate ri­pe­tu­ta­men­te. Dall’altro, Tail­win­dCSS supporta PurgeCSS, uno strumento usato come parte del processo di com­pi­la­zio­ne per rimuovere qualsiasi classe di utilità inu­ti­liz­za­ta dalla com­pi­la­zio­ne di pro­du­zio­ne. PurgeCSS elabora i modelli HTML del progetto e include solo le classi CSS trovate nel file di codice sorgente CSS generato. Questo riduce la di­men­sio­ne del file di codice sorgente a un livello ac­cet­ta­bi­le.