Ecco le Media Query, scopri come usarle per le tue necessità

Giungiamo finalmente a una lezione che inizia a usare i concetti appresi nelle precedenti, raccogliendoli assieme in una pratica comune.

In questa lezione scopriremo una nuova sintassi che possiamo applicare al nostro CSS, una sintassi che ci permetterà di scoprire quali siano le dimensioni della nostra finestra e con la quale potremo inserire delle regole specifiche.

Torniamo per un momento alle prime due lezioni di questo corso, abbiamo discusso la differenza tra le tecniche mobile e desktop first dove, con quest’ultimo approccio, eravamo in grado di aggiungere nuove regole CSS per gli schermi più piccoli.

Scoprire le dimensioni della finestra del nostro browser è possibile grazie alle Media Query, grazie a queste possiamo fare veramente molte cose ma prima di andare a scoprire alcune delle soluzioni che possiamo implementare grazie a questa @-rule è giusto fare qualche cenno storico e ricordarci a che cosa dobbiamo la presenza delle media query.

Molto spesso è una cosa che non ne sentiamo parlare, ma tu sapevi che puoi specificare dei fogli di stile specifici per la tipologia di dispositivo che visualizza le nostre pagine?

Scopriremo più avanti le più interessanti regole che si possono specificare grazie a queste, la cosa che mi interessa maggiormente analizzare in questo punto della lezione è la possibilità di offrire un foglio di stile personalizzato dedicato alla stampa.

Infatti grazie alle media query è anche possibile intercettare il momento in cui il nostro browser consulta la pagina per mandarla in stampa e collegare un foglio di stile aggiuntivo che ci permetterà di rimuovere immagini, colori di sfondo, informazioni superflue e tutti gli altri elementi che andrebbero semplicemente a far sprecare l’inchiostro del nostro visitatore.

<link rel="stylesheet" media="print" href="stampa.css" />

Quella che ti ho appena portato come esempio è il metodo che ci permette di collegare, grazie alle media query HTML, un foglio di stile aggiuntivo se le nostre pagine vengono stampate. Come puoi notare tutto è delegato alla presenza e al valore dell’attributo media.

Il codice presentato è una vecchia forma di codice HTML che veniva usato a fine anni ’90, perché compatibile con tutti i browser; ma che a quest’oggi non dovrebbe essere più utilizzato perché abbiamo soluzioni migliori per applicarle.

Scopriremo nella sezione successiva quali siano i modi distinti per creare delle media query discutendone le diversità, ma la cosa che desidero tu ti ricordi è che non esistono soltanto le media query CSS ma che per arrivare alla stabilità di oggi abbiamo attraversato diverse soluzioni, compreso l’utilizzo di attributi ormai in disuso.

Tre modi per creare media query

Come accennato precedentemente, uno sviluppatore ha diverse possibilità per creare e gestire delle media query.

Possiamo arricchire l’elemento <link> con un attributo media in grado di distinguere qualsiasi condizione accettabile, ma se ci pensi un attimo con questo comportamento si esce un po’ dalla logica dei CSS.

Specificando il foglio di stile all’interno dell’HTML stiamo creando un nuovo elemento nel DOM che verrà comunque caricato dal nostro browser e questo non aiuta certo le ottimizzazioni del sito.

Oltre a questo, torniamo ancora una volta allo stesso problema che abbiamo affrontato negli anni quando dovevamo creare gli stili dei nostri elementi direttamente nel browser.

Non so se ti è mai capitato, ma prima dell’avvento dei CSS si era soliti usare un elemento <font> per personalizzare il carattere con regole che ne specificavano la famiglia, la grandezza, il colore e praticamente tutte le altre personalizzazioni che oggi andiamo a impostare grazie alle proprietà CSS.

Anche collegando un CSS, nel caso in cui dovessi modificare il nome di un vecchio o aggiungere un nuovo foglio di stile dovrei aprire una a una tutte le pagine del mio progetto e modificare la riga di codice interessata; ma questo è un incubo!

Quindi, ancora una volta, inserire del codice dedicato allo stile dei nostri elementi all’interno dell’HTML è una pratica molto sbagliata e per questo motivo ti sconsiglio di utilizzare la tecnica appena presentata, ti sconsiglio di usare le Media Query HTML.

Per fortuna nostra abbiamo altri due metodi da descrivere, entrambi CSS 🙂

Di questi ce né soltanto uno che ti consiglio e che mi vedrai utilizzare per il resto del corso, ma ho intenzione di presentarteli entrambi per mantenere la lezione più completa possibile e permetterti di poter prendere delle scelte autonome.

Il primo metodo con il quale possiamo creare delle Media Query CSS è quello di utilizzare la @-rule @import, che ci permette di importare dei file esterni all’interno di un CSS.

@import url("stampa.css") print;

Molti sono gli articoli e i libri in cui viene sconsigliato l’uso di @import perché ci invita a scrivere del codice sporco e poco performante. Mentre il nostro browser scaricherà il foglio di stile principale si troverà a dover scaricare anche quello specificato nella url().

Però la cosa che ti dovrebbe sorprendere dall’esempio precedente è quella parola che si trova dopo le parentesi tonde…

Come puoi notare tu stesso è la stessa parola che abbiamo utilizzato precedentemente nella Media Query HTML, ovvero stiamo ancora offrendo il CSS nel momento in cui il browser si preparerà alla stampa della pagina; ma lo stiamo facendo direttamente all’interno del foglio di stile.

Questa potrebbe essere una prima soluzione, a parte i problemi di ottimizzazione descritti precedentemente è possibile poter utilizzare questo metodo perché siamo in grado di gestire i nostri fogli di stile da un unico posto; ma la prossima tecnica, unita al Content First, permette di creare dei siti web dalle prestazioni ancora più performanti.

Il metodo che ti consiglio in assoluto più di tutti è il metodo @media che ci permette di specificare dei blocchi di codice da utilizzare soltanto se la risoluzione cercata è stata incontrata.

@media print { 
    // Queste regole vengono applicate solo alla stampa
}

Rispettando la logica della cascata, caratteristica dei CSS, questa regola verrà inserita alla fine del foglio di stile in modo tale che diventerà più semplice andare a sovrascrivere le precedenti regole con le nuove.

Potrai notare tu stesso, con un semplice esperimento, che posizionando l’inclusione del codice in cima al foglio di stile le proprietà che verranno dichiarate successivamente, anche se fuori dalla Media Query, verranno applicate lo stesso.

@media print { 
    #box{
        background-color: red;
    }
}

#box{
    background-color: #fff;
}

Se provi a eseguire questo codice nel tuo browser, lo sfondo dell’elemento #box sarà sempre bianco, anche quando il browser mostra l’anteprima di stampa della nostra pagina. Questo è dovuto al fatto che anche se la proprietà background-color è stata definita specificatamente per la stampa, quella che viene dopo la sovrascrive per il principio della cascata.

Ecco che, al posto di usare un !important per qualsiasi proprietà che andiamo a dichiarare all’interno della Media Query, è molto più intelligente spostarla alla fine del foglio di stile.

#box{
    width: 500px;
    height: 500px;
    background-color: red;
    margin: 100px auto;
}

@media print {
    #box{
        background-color: #fff;
    }
}

Mantenere una logica di questo genere sarà inoltre incredibilmente utile visto che utilizzando Sass potremo includere tutti i parziali che desideriamo 🙂 Non ti ricordi che cosa sono i parziali in Sass?

Non preoccuparti, prima di finire questo corso potresti andare a ripassare Conosci Sass e Migliora il tuo Sviluppo CSS in vista della penultima lezione di questo corso.

Modifiche più comuni con le Media Query

Per il momento abbiamo visto soltanto come sia possibile modificare il nostro codice CSS quando la pagina deve essere stampata, ma per creare siti responsive questa conoscenza non sembra tanto utile non credi?

A dire il vero utilizzare soltanto il tipo print mi ha aiutato a non farti distrarre troppo, così abbiamo potuto concentrarci sulla nuova sintassi che abbiamo incontrato, @media.

Esistono un’altra manciata di tipi di Media Query che per fortuna si sono semplificati molto con il passare degli anni, oggi infatti abbiamo soltanto i seguenti:

• print – conosci già questo tipo, si attiva quando la pagina va in stampa;
• screen – seleziona gli schermi a colori che stanno visualizzando la pagina;
• speech – con questo invece possiamo aggiungere del codice quando lo strumento utilizzato è un sintetizzatore vocale;
• all – un po’ come dice il nome, con questo valore selezioniamo tutti i dispositivi precedenti e rappresenta anche il valore di default che verrà utilizzato.

Fino a qualche anno fa ci saremmo dovuti scontrare con una decina di tipi diversi di Media Query, neanche completamente supportati. Per il resto di questo corso non parlaremo più di tipi di media query, andremo a omettere la dichiarazione di questo valore utilizzando quello di default, all.

Però la cosa sicuramente più interessante è capire come utilizzare questo favoloso strumento per intercettare la risoluzione della nostra pagina e applicare delle modifiche CSS di conseguenza, proviamo con un codice del genere:

#box{
    width: 500px;
    height: 500px;
    background-color: red;
    margin: 100px auto;
}

@media (max-width: 600px) {
    #box{
        background-color: blue;
    }
}

Ecco svelato il segreto mistico delle Media Query, possiamo usare le stesse proprietà CSS per identificare la larghezza massima o minima dello schermo; ma perché non facciamo un po’ le cose più complicate?

Diciamo che io voglio andare a selezionare soltanto gli schermi che hanno una risoluzione massima di 800px, però soltanto se il dispositivo ha una proporzione landscape (ovvero orizzontale), vediamo come sia possibile fare questo modificando il codice precedente:

#box{
    width: 500px;
    height: 500px;
    background-color: red;
    margin: 100px auto;
}

@media screen and (max-width: 800px) and (orientation: landscape) {
    #box{
        background-color: blue;
    }
}

La Media Query che abbiamo realizzato in quest’ultimo esempio è leggermente più complicata delle precedenti; possiamo immediatamente notare il tipo di query specificato (screen) ma poi troviamo la parola chiave and che, un po’ come succede nei linguaggi di programmazione, ci permette di concatenare il valore della condizione precedente con quella successiva.

Quindi, se tutte le condizioni concatenate vengono considerate vere, allora verranno applicate le modifiche CSS inserite all’interno delle parentesi graffe.

Quante Media Query si possono utilizzare?

Se ti dico tutte quelle che desideri che mi rispondi? Sei contento? Non vedi l’ora di andare a creare complesse Media Query che ti permetteranno di personalizzare il tuo progetto sotto qualsiasi punto di vista?

Beh ti invito a fare un passo indietro.

Sviluppare significa essere in grado di applicare le soluzioni migliori nel modo più intelligente e dove possibile applicare il Don’t Repeat Yourself, una pratica che ci aiuterà a scrivere un sacco di codice in meno.

Quindi la soluzione migliore quando si parla di Media Query è utilizzare quelle necessarie.

Ci sono diverse scuole che propongono diversi approcci, alcune consigliano di adattare le Media Query in base alle dimensioni più diffuse mentre altre ci consigliano di basare le nostre modifiche studiando soltanto come si adatta il contenuto alle diverse risoluzioni.

Quello che preferisco fare io, invece, è fornirti un mix di entrambe, prima di tutto perché vogliamo applicare il metodo Content First ma anche perché in questo modo potremmo fare una panoramica generale delle varie soluzioni.

/* Regole risoluzione piu' bassa */
#box{
    width: 500px;
    height: 500px;
    background-color: red;
    margin: 100px auto;
}

/* Smartphone grandi dimensioni */
@media (min-width: 481px) {
    #box{
        background-color: blue;
    }
}

/* Tablet */
@media (min-width: 768px) {
    #box{
        background-color: yellow;
    }
}

/* Desktop */
@media (min-width: 992px) {
    #box{
        background-color: cyan;
    }
}

/* Grandi Desktop */
@media (min-width: 1200px) {
    #box{
        background-color: purple;
    }
}

Con questo esempio spero di averti fatto capire la malleabilità di questo approccio.

Come spiegato anche nelle prime lezioni, da che mondo e mondo l’approccio migliore è quello di iniziare a scrivere il nostro codice per gli schermi più piccoli, e che quindi (presumibilmente) non sono in grado di mostrare effetti avanzati.

Aggiungendo man mano nuove regole ci permetterà di caricare questi stili soltanto su device abbastanza potenti da garantire una fluida navigazione.

Nel codice precedente abbiamo utilizzato le Media Query con diversi valori che definiscono le larghezza minima per far applicare le regole contenute, vorrei adesso cercare di comprendere meglio perché sono stati scelti determinati numeri e soprattutto perché abbiamo sbagliato.

I valori che hai visto come 481px, 768px, 992px e anche 1200px sono valori che ho rubato alla griglia di Bootstrap ma come dicevo prima, questi possono cambiare a seconda del progetto e soprattutto del contenuto.

Quello che bisogna capire in questo caso è soltanto che questi numeri rappresentano i breakpoint del nostro layout, punti in cui la disposizione precedente si trasforma per adattarsi meglio alla nuova risoluzione.

Ma ti ho detto che da qualche parte abbiamo fatto un errore. Sicuramente non nel nostro codice di esempio dato che tutto funziona correttamente, ma allora dove?

Anche se tu non hai alcuna colpa, visto che sono stato io a scrivere il codice degli esempi, l‘errore fatto è stato scrivere i nostri breakpoints in pixels.

Già qualche lezione fa abbiamo discusso di quanto sia poco utile avere delle Media Query definite con un’unità di misura che tiene in considerazione soltanto la larghezza della finestra.

Sarebbe molto meglio trasformare tutto in un’unità di misura che ci permette di tener conto anche della larghezza del font…

Aspetta, l’abbiamo incontrata proprio la lezione scorsa!

Spero che questo aggancio non ti abbia disturbato, ammetto che a volte provo a essere un po’ “originale”, ma la cosa più importante di tutte è che tu ti sia ricordato che nella scorsa lezione abbiamo proposto di usare l’unità di misura rem per tutto quello che misura una larghezza del nostro layout.

Al momento abbiamo creato soltanto delle Media Query e cambiato dei colori di sfondo, ma se utilizziamo i rem al posto dei px saremo sicuri di aver creato un layout che oltre che elastico sarà anche ottimizzato per i contenuti della pagina.

/* Regole risoluzione piu' bassa */
#box{
    width: 31.25rem;
    height: 31.25rem;
    background-color: red;
    margin: 6.25rem auto;
}

/* Smartphone grandi dimensioni */
@media (min-width: 30rem) {
    #box{ background-color: blue; }
}

/* Tablet */
@media (min-width: 48rem) {
    #box{ background-color: yellow; }
}

/* Desktop */
@media (min-width: 62rem) {
    #box{ background-color: cyan; }
}

/* Grandi Desktop */
@media (min-width: 75rem) {
    #box{ background-color: purple; }
}

Abbiamo già visto come sia semplice calcolare il valore in rem di misure definite in px, in fin dei conti basta applicare la formula Grandezza Target / Grandezza Base = Valore, ma devo confessare che in questa situazione ho barato, o meglio ho utilizzato meglio lo strumento a mia disposizione.

Come ti spiego nel corso dedicato ad Atom (che pubblicheremo a breve), questo editor si può personalizzare alle proprie esigenze in modo veramente semplice e grazie alle sue estensioni possiamo aggiungere funzionalità prima non disponibili.

Per modificare le misure precedenti ho utilizzato un pacchetto che prende il nome di px-to-rem e puoi trovarlo nel repository GitHub oppure direttamente nelle pagine del sito di Atom.

Spero che i concetti presentati siano stati chiari perché avrai bisogno di queste conoscenze per affrontare al meglio la prossima lezione, si inizierà a fare sul serio.

Se così non fosse e fai parte degli skillati, non esitare a venire sul forum e chiedere aiuto, saremo più che lieti di accompagnarti nel tuo apprendimento!