Media query CSS

Il linguaggio CSS (“Cascading Style Sheets”, in italiano “fogli di stile a cascata”), insieme a HTML e JavaScript, rappresenta la struttura di base per lo sviluppo di siti web moderni. Il CSS è un linguaggio di programmazione, ma non descrive i singoli passaggi necessari per risolvere un problema. Si definisce invece un obiettivo da raggiungere. Il CSS è quindi un linguaggio dichiarativo simile a SQL. Parte dei CSS sono le cosiddette media query, che interrogano le proprietà di un dispositivo di output. Sono utilizzate per il responsive web design. Come funziona esattamente?

Le media query CSS sono state introdotte con la specifica CSS3. Una media query lega l’assegnazione delle proprietà CSS di un elemento a una o più condizioni del supporto. Nel caso più semplice, viene fatta una distinzione tra il supporto su cui l’informazione viene visualizzata, 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 specificata 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 condizione specificata. Ad esempio, gli elementi che non possono essere visualizzati possono essere nascosti quando vengono emessi come pagina stampata:

Oltre il supporto da utilizzare, le media query CSS possono essere utilizzate per interrogare proprietà specifiche del rispettivo supporto. Queste query CSS sono quindi la caratteristica tecnica centrale che ha reso davvero possibile il responsive web design.

Il responsive web design mira ad adattare la visualizzazione di una pagina web al rispettivo dispositivo nel miglior modo possibile. Le media query sono usate per interrogare varie proprietà del dispositivo di visualizzazione, le cosiddette media feature. Tra le altre cose, è possibile definire regole di stile per diverse dimensioni dello schermo. Inoltre, regole di stile ottimizzate possono essere definite nel caso in cui un dispositivo mobile sia inclinato.

Illustriamo di seguito una panoramica delle media feature attualmente più usate per il responsive design:

Vediamo alcuni esempi. Immaginiamo il titolo principale di una pagina web. L’HTML fornisce l’elemento ‘h1’. Per prima cosa, per l’elemento h1 imposteremo le regole di stile indipendentemente dal dispositivo di visualizzazione:

A questo punto, definiamo una media query che interroga la larghezza dello schermo. All’interno della query, specifichiamo le regole di stile che dovrebbero essere applicate al titolo a partire da questa larghezza. Nell’esempio specifico, aumentiamo la dimensione 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’intestazione h1. L’interlinea è definita dalla proprietà ‘line-height’ come unità relativa e viene ereditata poiché non è esplicitamente sovrascritta. Nell’esempio concreto, l’interlinea dell’elemento h1 nello stato base è 24px * 1,25 = 30px. Su schermi larghi almeno 1.024 pixel, l’interlinea proporzionale è pari a 36px * 1,25 = 45px.

Questa amalgama di regole di stile esistenti e appena definite è suggerita dal termine “cascading” (a cascata) della denominazione 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 sovrascrivono selettivamente le proprietà in determinate condizioni.

Un altro esempio: immaginiamo di voler mostrare tre elementi in un contenitore. Gli elementi sullo schermo di un dispositivo mobile devono essere visualizzati uno sotto l’altro quando il dispositivo è tenuto in posizione verticale. Quando si inclina il dispositivo orizzontalmente, il layout dovrebbe cambiare in modo che gli elementi siano visualizzati fianco a fianco. Con il modulo flexbox layout e una media query CSS, che interroga l’orientamento del dispositivo, il layout può essere implementato in poche righe di HTML e CSS. Prima definiamo il contenitore e gli elementi contenuti nell’HTML:

Definiamo inoltre le seguenti regole CSS. Impostiamo la proprietà ‘display: flex’ sul contenitore e, per questo elemento, impostiamo condizionatamente la proprietà ‘flex-direction’ tramite media query CSS. Quando il dispositivo è in modalità di visualizzazione orizzontale, gli elementi sono visualizzati in fila, uno accanto all’altro; quando è in modalità verticale, gli elementi sono disposti in colonna, uno sotto l’altro:

Oltre alle dimensioni dello schermo e all’orientamento del dispositivo, possiamo anche interrogare la risoluzione fisica dello schermo tramite media query. Ciò è particolarmente interessante per visualizzare immagini in pixel. Ad esempio, immaginate che un logo sia disponibile in due versioni, ognuna ottimizzata per schermi a bassa e alta risoluzione. Un semplice trucco per visualizzare il logo appropriato in ogni caso è quello di mettere entrambe le varianti nella pagina. Con la media query CSS interroghiamo la risoluzione dello schermo e nascondiamo la versione non necessaria tramite ‘display: none’. Questo approccio potrebbe apparire così implementato nel codice HTML e CSS:

Nelle spiegazioni precedenti abbiamo parlato di “schermo” in riferimento alla larghezza disponibile sul supporto di output. Ciò è vero dal punto di vista concettuale, ma a livello tecnico non è del tutto corretto. Il browser opera internamente basandosi sul concetto di “viewport”. Affinché la larghezza di viewport corrisponda effettivamente alla larghezza dello schermo, è necessario inserire l’indicazione ‘meta-viewport’ nella sezione ‘<head>‘ dei file HTML. In assenza di questa indicazione, il sito viene visualizzato sui dispositivi mobili come se fosse su desktop, ma nel complesso con dimensioni estremamente ridotte.

Nel responsive web design gli elementi devono adattarsi alla superficie dello schermo. Spesso si tratta di definire le dimensioni degli elementi in varie condizioni. La specifica CSS ingloba una grande varietà di unità e, tra queste, l’unità di misura più semplice è sicuramente il pixel. Ad esempio, un’immagine da 1080p presenta dimensioni pari a 1.920 pixel di larghezza per 1.080 pixel di altezza.

Il pixel è un’unità assoluta e, per definizione, non si adatta allo spazio esistente. Vediamo un esempio per cui questa situazione potrebbe rivelarsi un problema. Supponiamo 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, potrebbero verificarsi anomalie nella visualizzazione su schermi piccoli, in cui l’immagine occupa uno spazio superiore a quello disponibile.

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

Tramite CSS blocchiamo la larghezza a 1.920 pixel:

In questo scenario sarebbe stato meglio utilizzare un’unità relativa al posto dei pixel. Fin dai primi tempi dei layout basati su tabella il CSS riconosce la percentuale come unità relativa. Se impostiamo la larghezza dell’immagine tramite CSS su ‘100%’, l’immagine si adatta in modo fluido allo spazio esistente. Ciò funziona perché i valori percentuali si riferiscono sempre all’elemento circoscritto.

Abbiamo fatto un altro passo avanti verso il nostro obiettivo, ovvero quello di adattare la larghezza di un’immagine allo spazio disponibile. Tuttavia, abbiamo creato un nuovo problema: infatti, su uno schermo con una larghezza superiore a 1.920 pixel, l’immagine viene visualizzata ingrandita e quindi risulta pixelata. Per questo dobbiamo anche limitare la larghezza massima dell’immagine alle relative dimensioni effettive in pixel:

Oltre ai pixel e alla percentuale, il CSS conosce una serie di altre unità. Le unità relative em, rem e vw, vh offrono tutte interessanti possibilità di utilizzo nel responsive design. Di seguito trovate una panoramica delle unità CSS più usate per il responsive design con il relativo utilizzo:

In aggiunta alle semplici media query finora presentate è 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 interrogare tramite media query CSS, in futuro sarà disponibile una serie di altre interessanti funzionalità. 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 cosiddette container query. Grazie a queste query sarà possibile per la prima volta collegare le regole di stile per gli elementi alle proprietà del contenitore. Le container query sono quindi in contrapposizione con le media query CSS, che interrogano le proprietà globali del dispositivo di visualizzazione. L’uso delle container query consente di gestire casi speciali, per i quali in passato si ricorreva a JavaScript o a media query complesse.

In relazione al responsive web design e alle media query CSS si parla spesso di “breakpoint” (in italiano: “punti di interruzione”). Un breakpoint è la larghezza definita dello schermo, per cui viene attivato un set di regole CSS, definito tramite media query CSS. Si possono visualizzare i breakpoint definiti su un sito web aprendo gli strumenti di sviluppo nel browser. Se è attiva la visualizzazione responsive, i breakpoint vengono visualizzati come barre colorate sopra la pagina web.

Una pratica consigliata riconosciuta per il responsive 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 informazioni di stile per gli schermi più piccoli. Queste definizioni costituiscono la struttura di base del design. Basandosi su di essa verranno definiti diversi breakpoint per schermi progressivamente più grandi. All’interno dei breakpoint vengono definite in modo selettivo nuove regole di stile per gli elementi e quindi vengono sovrascritte le regole esistenti per gli schermi più piccoli.

Si noti che seguendo l’approccio Mobile first non esiste un vero breakpoint ‘small’. Le informazioni per i piccoli dispositivi vengono definite semplicemente senza breakpoint.

All’interno dei breakpoint vengono definite le regole di stile per gli elementi, la cui visualizzazione deve essere adattata a schermi di varie dimensioni. Probabilmente avete già capito che questa centralizzazione della base di codice CSS di un progetto web costituisce un problema. Di solito è preferibile raccogliere tutte le proprietà CSS di un elemento in un file separato.

Per modulare il codice CSS di un progetto, all’inizio venivano utilizzati diversi preprocessori 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 postprocessore CSS. Tutte le tecnologie menzionate consentono di incapsulare le media query CSS sotto un selettore CSS. In questo modo le regole di stile di un elemento possono essere definite collettivamente per tutte le condizioni 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 processore Stylus traduce i file in CSS e raccoglie le regole media query CSS inserite sotto un unico breakpoint. Il codice Stylus visualizzato viene tradotto nel seguente codice CSS:

L’approccio di incapsulare le media query CSS all’interno delle regole di stile di un elemento ed elaborarle tramite il processore CSS è piuttosto efficiente. Tuttavia, questo costringe ancora lo sviluppatore a passare continuamente tra i livelli HTML e CSS. C’è anche la necessità di assegnare nomi di classe univoci agli elementi in HTML. La logistica risultante porta a una sgradita complessità. È qui che entrano in gioco i framework di utilità CSS, una tecnologia influente al giorno d’oggi.

Un framework di utilità CSS collega le proprietà CSS atomiche ai breakpoint. Le classi CSS risultanti possono essere assegnate a qualsiasi elemento nell’HTML. Questo permette di definire layout e componenti reattivi solo in HTML, senza bisogno di usare codice CSS. L’uso di un framework di utilità CSS consente una rapida prototipazione ed è perfetto per lo sviluppo di componenti. È per questa ragione che i framework di utilità CSS vengono spesso impiegati in combinazione con tecnologie orientate ai componenti, come React e Vue.

Consideriamo un altro esempio preso in prestito dal framework di utilità CSS Tachyons. Date un’occhiata al seguente codice CSS. Definiamo innanzitutto 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 breakpoint già presentati, ‘medium’ e ‘large’, le corrispondenti classi CSS, che contengono l’abbreviazione del rispettivo breakpoint nel loro nome:

Grazie a queste classi CSS possiamo scrivere elementi reattivi totalmente 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 automaticamente alla larghezza disponibile sullo schermo. Su schermi di medie dimensioni l’elemento accetta un massimo di ‘2rem’, su schermi grandi un massimo di ‘3rem’.

I framework di utilità CSS definiscono un grande insieme di classi atomiche e ogni classe specifica solo una proprietà CSS. Oltre alle dimensioni di un elemento, si tratta di informazioni sulla tipografia, la colorazione e pressoché ogni altra proprietà possibile. Per ogni proprietà atomica, un framework di utilità CSS contiene classi per ciascun breakpoint definito. Combinando diverse classi, quasi tutti gli elementi completamente reattivi possono essere uniti.

Il framework Tachyons descritto sopra è in circolazione da diversi anni e non viene più sviluppato attivamente. Tuttavia, per via della sua relativa semplicità, vale la pena prendere in considerazione Tachyons per imparare il responsive web design. Il modo più semplice per capire è osservare i componenti di Tachyons. Questi sono elementi di esempio che sono definiti esclusivamente usando classi di utilità.

Il successore spirituale di Tachyons è la sua variante moderna, TailwindCSS, che offre alcuni vantaggi rispetto a Tachyons. Il progetto è inoltre sviluppato attivamente e supporta molti sistemi di sviluppo front end popolari. Inoltre, TailwindCSS può essere completamente personalizzato per le esigenze specifiche di un progetto. Tutte le preimpostazioni come i breakpoint, la scala delle dimensioni dei caratteri e simili possono essere configurate facilmente.

Per quanto i framework di utilità CSS siano utili per lavorare, hanno anche un grande svantaggio: può essere necessario un grande insieme di classi atomiche per definire un elemento. Inoltre, per impostazione predefinita, il file di codice sorgente CSS contiene classi per tutte le combinazioni di valori di proprietà CSS e breakpoint. Nel caso di TailwindCSS ci sono migliaia di classi, il che provoca un aumento di diversi megabyte delle dimensioni del file CSS non compresso, uno stato insostenibile dal punto di vista delle prestazioni.

Fortunatamente TailwindCSS vi pone rimedio in due modi. Da un lato, il framework riconosce l’istruzione ‘@apply’, che è usata per riunire sotto un nuovo nome di classe le combinazioni di classi di utilità usate ripetutamente. Dall’altro, TailwindCSS supporta PurgeCSS, uno strumento usato come parte del processo di compilazione per rimuovere qualsiasi classe di utilità inutilizzata dalla compilazione di produzione. PurgeCSS elabora i modelli HTML del progetto e include solo le classi CSS trovate nel file di codice sorgente CSS generato. Questo riduce la dimensione del file di codice sorgente a un livello accettabile.