CSS media query

Da sempre CSS integra un meccanismo per servire fogli di stili differenti a seconda del dispositivo utilizzato dal visitatore (nella nostra guida base ai CSS abbiamo affrontato l’argomento nella lezione dedicata all’attributo media). Con CSS3 questo meccanismo è stato evoluto ed ampliato notevolmente mediante l’introduzione di un nuovo sistema che prende il nome di media query o media queries, attraverso il quale non solo è possibile distinguere in base al tipo, ma anche in base alle caratteristiche del dispositivo (come, ad esempio, la dimensione dello schermo, l’orientamento, ecc.).

Media query: cos’è e a cosa serve

Tralasciando le definizioni, una media query è un insieme di direttive CSS che dovranno applicarsi ad un dispositivo (media) di un certo tipo e/o avente determinate caratteristiche.

Dichiarare una media query

Una media query può essere dichiarata in tre modi differenti. Vediamoli di seguito prima di approfondire la sintassi di questo potente strumento introdotto da CSS3.

1) mediante l’inclusione di un foglio di stile esterno attraverso un tag <link>:

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

2) all’interno di un foglio di stile, importando un secondo foglio di stile mediante la direttiva @import:

@import url(stampa.css) print;

3) all’interno di un foglio di stile, direttamente mediante la direttiva @media:

@media print {
  ...
}

Nei tre esempi visti qui sopra non abbiamo fatto altro che specificare regole CSS specifiche per la stampa (il nostro media è print) ma, ovviamente, la potenza delle media queries non ri risolve in questo.

Per motivi espositivi, nel proseguo di questa lezione, faremo riferimento solo alla direttiva @media, fermo restando che le tre tecniche sono tra loro equivalenti.

Sintassi delle media queries di CSS3

L’elemento caratterizzante delle media queries di CSS3 è dato dalla possibilità di selezionarie il dispositivo in modo molto preciso, non solo in base al tipo (come avveniva nella precedente versione di CSS) ma anche in base ad altre sue caratteristiche, eventualmente combinate tra loro.

L’operatore and

Vediamo subito un esempio:

@media screen and (max-width: 900px) {
  ...
}

Nel nostro esempio abbiamo selezionato dei dispositivi ben precisi in base a due fattori:

• la tipologia: solamente i dispositivi dotati di uno schermo (screen), ad esempio, computer, tablet e smartphone;
• le dimensioni dello schermo: solamente i dispositivi aventi uno schermo con risoluzione non superiore a 900 px di larghezza (max-width: 900px).

La sintassi di base, come avrete capito, è la seguente:

@media tipo and (caratteristica)

Dopo la direttiva @media va specificato il tipo di dispositivo e/o la sua caratteristica discriminante. Se è specificato il tipo, la caratteristica è preceduta dall’operatore and. In ogni caso la caratteristica va specificata tra parentesi. facciamo qualche esempio:

/* SOLO IL TIPO */
@media screen {
  ...
}

/* SOLO LA CARATTERISTICA */
@media (max-width: 900px) {
  ...
}

/* SIA IL TIPO CHE LA CARATTERISTICA */
@media screen and (max-width: 900px) {
  ...
}

E’ anche possibile specificare più di una caratteristica, in questo modo:

@media tipo and (caratteristica n.1) and (caratteristica n.2)

Facciamo un esempio:

@media screen and (max-width: 900px) and (max-height: 600px) {
  ...
}

In qusto caso le regole CSS andranno ad applicarsi agli schermi con una risoluzione non superiore a 900 in larghezza e 600 in altezza. Le regole CSS saranno applicate quando entrambe le caratteristiche saranno soddisfatte.

L’operatore virgola

Volendo, però, è anche possibile creare delle regole sulla base di caratteristiche alternative, in questo modo:

@media tipo and (caratteristica n.1), tipo and (caratteristica n.2)

Facciamo un esempio:

@media screen and (max-width: 900px), screen and (max-height: 600px) {
  ...
}

In questo caso le regole CSS andranno ad applicarsi sia agli schermi aventi una risoluzione in larghezza non superiore a 900 pixel, che a quelli aventi una risuluzione in altezza non superiore a 600 pixel (le due caratteristiche non devono necessariamente essere soddisfatte simultaneamente).

L’operatore not

Nella costruzione della query di selezione del dispositivo è anche possibile anteporre la keyword not per impostare delle negazioni, ad esempio:

@media not screen and (max-width: 900px)

Il risultato ottenuto sarà l’esatto opposto di quello visto in precedenza, cioè le regole CSS verranno applicate sempre tranne che per gli schermi aventi una risoluzione in larghezza pari o inferiore 900 pixel.

I tipi di media

CSS3 ha ridotto notevolmente l’elenco dei tipi supportati rispetto a CSS 2.1. Ad oggi i tipi supportati sono solamente quattro:

• all – tutti i dispositivi;
• print – dispositivi di stampa;
• screen – dispositivi dotati di monitor (computer, tablet, smarphone, smart TV, ecc.);
• speech – dispositivi che effettuano la sintesi vocale del contenuto della pagina (cd. screenreaders).

Caratteristiche utilizzare nelle query di selezione

Ben più ampia la lista delle caratteristiche definite e riconosciute da CSS3. Le più importanti sono:

• Altezza dello schermo:
  • device-width – larghezza dello schermo
  • max-device-width – larghezza massima dello schermo
  • min-device-width – larghezza minima dello schermo
• Larghezza dello schermo:
  • device-height – altezza dello schermo
  • max-device-height – altezza massima dello schermo
  • min-device-height – altezza minima dello schermo
• Altezza della viewport:
  • width – larghezza della viewport
  • max-width – larghezza massima della viewport
  • min-width – larghezza minima della viewport
• Larghezza della vewport:
  • height – altezza della viewport
  • max-height – altezza massima della viewport
  • min-height – altezza minima della viewport
• Risoluzione:
  • resolution – risoluzione del dispositivo (dpi o dpcm)
  • max-resolution – risoluzione massima del dispositivo (dpi o dpcm)
  • min-resolution – risoluzione minima del dispositivo (dpi o dpcm)
• Colori:
  • color – numero di bit per ciascuna componente di colore (0 indica che il dispositivo non supporta i colori)
  • monochrome – numero di bit per "colore" su un dispositivo monocromatico (in scala di grigi)
• Altre caratteristiche dello schermo:
  • aspect-ratio – rapporto tra la larghezza e l’altezza della viewport
  • orientation – orientamento della viewport (nei dispositivi mobili indica la modalità orizzontale – landscape o verticale – portrait)

Differenza tra *-width e *-device-width

Le caratteristiche relative alla dimensione dello schermo possono essere facilmente confuse: min-width e min-device-width, ad esempio, vengono spesso utilizzate come se fossero la stessa cosa… in realtà non è così: min-width è basato sulla dimensione della finestra del browser mentre min-device-width prende come riferimento la dimensione del display che non necessariamente corrisponde a quella dell’area di visualizzazione.

Se un utente dovesse ridimensionare la finestra del browser, quindi, le media query che utilizzano *-device-width non produrrebbero alcuna modifica!

Media Queries e design responsivo

Uno dei meriti principali delle media queries è quello di aver dato vita alla cosiddetta tecnica del design responsivo grazie alla quale, senza alterare la struttura HTML di una pagina web, è possibile adattarne l’aspetto a seconda delle dimensioni del device utilizzato.

Per raggiungere un simile obiettivo si fa ricorso, appunto, alle media queries grazie alle quali si andranno a definire specifiche regole di stile al fine di adattare l’aspetto di ciascun elemento in base alle dimensioni della viewport.

In questo contesto risultano particolarmente utili le proprietà min-width, max-width e orientation di CSS.

Facciamo un semplice esempio, supponendo di avere una pagina web con un layout a due colonne:

.sidebar {
  float: left;
  width: 30%;
}
.main {
  float: left;
  width: 70%;
}

Ora prevediamo, all’interno del nostro foglio di stile, una media query per i dispositvi con schermo piccolo. Nello specifico andremo a ridisegnare il layout del sito facendo in modo che i due elementi (sidebar e main) non siano più affiancati ma vengano visualizzati l’uno sotto all’altro:

@media (max-width: 600px) {
  .sidebar, .main {
    float: none;
    width: 100%;
  }
}

Lo stesso risultato, più correttamente, si sarebbe potuto raggiungere così:

.sidebar .main {
  width: 100%;
}
@media (min-width: 600px) {
  .sidebar, .main {
    float: left;
  }
  .sidebar {
    width: 30%;
  }
  .main {
    width: 70%;
  }
}

Quello che abbiamo appena visto è un esempio di design responsivo: l’HTML della pagina non cambia ma cambia il suo aspetto in base alle dimensioni del device utilizzato dall’utente.

In quest’ultimo esempio gli emeneti "sidebar" e "main" saranno incolonnati a meno che lo schermo non superi le dimensioni in larghezza di 600 pixel.

Negli esempi visti sopra abbiamo utilizzato esclusivamente le caratteristiche legate alla larghezza dello schermo, tuttavia nella definizione di un design responsivo può rivelarsi utilie utilizzare, in combinazione con queste, nahce la rilevazione dell’orientamento del device. Ad esempio si supponga di voler definire due stili differenti per iPad a seconda che questo sia utilizzato in modalità landscape (panoramica) o portrait (ritratto):

/* iPad (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

  /* ... stile ... */

}

/* iPad (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

  /* ... stile ... */

}

Media query e Javascript (cenni)

Attraverso CSS abbiamo visto come realizzare un design responsivo. Nella maggior parte dei casi, tuttavia, per lo sviluppo di un sito adattivo è necessario utilizzare anche Javascript. A tal fine può rivelarsi molto utile il metodo matchMedia dell’oggetto window, grazie al quale potremo utilizzare le media query anche per creare modifiche sofisticate dell’interfaccia utente mediante la manipolazione del DOM e/o l’attivazione/disattivazione di funzionalità.

Di seguito un semplice esempio di implementazione:

var mql = window.matchMedia('@media all and (min-width: 600px)');
if (mql.matches) {
    // istruzioni per larghezze pari o superiori ai 600px
} else {
    // istruzioni per larghezze fino a 599px
}

Alla base del costrutto condizionale vi è, appunto, il metodo matchMedia che restituisce un oggetto con cui rappresentare il risultato di un parsing a carico di una media query; tale oggetto verrà passato al metodo matches() che lo utilizzerà come valore di confronto nella condizione introdotta tramite il costrutto if/else.