Media Queries (Cosa sono e come si usano)

Abbiamo parlato recentemente nell’articolo intitolato “Il Responsive design” della tendenza ormai diventata necessità di tener conto del tipo di dispositivo che l’utente di un sito web utilizza.

L’esplosione dei dispositivi mobili come tablets e soprattutto smartphones impone al web designer di prevedere un layout fruibile da questi dispositivi e, come abbiamo visto, non solo il layout, ma anche i contenuti possono essere in qualche modo differenti (classico l’esempio di Microsoft che è alquanto inutile che proponga il download di service pack, patch e programmi vari per computers a chi si è collegato da uno smartphone).

In quell’articolo abbiamo fatto cenno alla metodologia che oggi permette agli sviluppatori di differenziare il modo di presentare il sito web a seconda del dispositivo usato dall’utente senza dover sviluppare più volte il sito in formati differenti, cosa che rendebbe complicatissimi aggiornamenti ed ordinaria amministrazione, oltre a non mettere al riparo dai progressi della tecnologia. La metodologia è quella basata sull’utilizzo di delle ‘media queries’ nei fogli di stile CSS.

In questo articolo vogliamo quindi affrontare in dettaglio cosa sono e come si usano le media queries.


Innanzitutto è doveroso chiarire subito che Internet Explorer non le supporta sino alla versione 8 inclusa (strano vero?). Per superare l’impasse e far digerire le media queries anche ad Internet Explorer nelle versioni meno aggiornate si può includere nella <head> questo script.

Ma che cosa sono le media queries? Sono dichiarazioni CSS3 con le quali si determina il tipo di dispositivo che sta accedendo al nostro sito ed altre caratteristiche del dispositivo stesso in modo che si possano assegnare stili differenti in funzione di queste caratteristiche.
Per semplicità nel proseguo chiameremo media-type il tipo di dispositivo utilizzato dall’utente e media-features le caratteristiche, mentre espressione sarà la condizione imposta per ogni caratteristica.
Siccome un esempio vale più di 10 definizioni vediamo subito un esempio di media query prima di affrontare in dettaglio la descrizione di sintassi e possibili valori.

Sono due i modi in cui è possibile usare una media query:

  1. Nella <head> del foglio html si può richiamare un CSS in maniera condizionale in funzione del dispositivo di output. Ecco un esempio:
    <link rel=”stylesheet”  media=”(max-width: 640px)”  href=”stile640.css” />
  2. All’interno del foglio di stile si possono assegnare differenti proprietà a seconda del tipo di dispositivo come segue:
    @media (max-width: 640px) {
       .miaclasse {
          /*…  inserire proprietà */
       }
    }

Con la prima dichiarazione abbiamo detto che se il dispositivo dell’utente, indipendentemente dal tipo che non abbiamo indicato, ha una larghezza di schermo massima di 640px il foglio di stile da usare è “stile640.css”.

Il secondo formato è quello da preferire per evitare la proliferazione dei fogli di stile. In questo caso quindi il foglio di stile sarà univoco, ma all’interno ci sarà la media query che vedete nell’esempio che, nelle stesse condizioni indicate prima, assegnerà le opportune proprietà. Ovviamente questa query può essere ripetuta in tutti i punti del css necessari. max-width: 640px è l’espressione, cioè la condizione che va testata. Da notare che la query in questo caso va iniziata con ‘@media’.

Negli esempi approfondiremo questo secondo formato, ma ovviamente sarà elementare optare per il primo se si preferisce.

Innanzitutto diciamo due parole sulla sintassi:

  • Il media-type è opzionale. Se non è indicato si assume ‘all’ che significa che le proprietà si applicheranno a tutti i dispositivi.
    Se tuttavia si utilizzassero gli operatori not oppure only il media-type andrà specificato.
  • Le espressioni vanno sempre racchiuse tra parentesi.
  • In un’espressione si assegna un valore ad una media-feature per mezzo di ‘:
  • Se si usa una media-feature senza indicare un valore, l’espressione restituirà VERO se il suo valore è ≠ 0. Ricordiamo che VERO vale 1.
  • Se l’espressione è relativa ad una media-feature incompatibile col media-type la query restituisce sempre FALSO (ad es. (scan) per media-type print)
  • Si possono utilizzare i seguenti operatori logici:
    • not : inverte il risultato dell’intera query. Se la query restituisse vero col not restituirà falso e viceversa. Ad esempio:
      @media not (screen and (color))
      significa ‘tutto escluso schermi a colori’
    • Only : logicamente non avrebbe alcun senso, ma è utile per impedire ai browser più vecchi di applicare lo stile indicato anche se la query non è rispettata.
    • And : usato per combinare più condizioni che devono essere tutte verificate per poter applicare le proprietà indicate. Ad esempio:
      @media (min-width: 700px) and (orientation: landscape) { … }
    • , : la virgola sta ad indicare l’operatore logico OR. Se si vogliono indicare condizioni alternative si possono separare con una virgola. Le proprietà indicate verranno applicate se almeno una delle condizioni è verificata. Esempio:
      @media (screen and (color)), print and (color)

 

Siccome gli stili che definiamo sono generalmente attribuiti a più media-types, questi ultimi sono convenzionalmente raggruppati in media-groups così che nella descrizione delle media-features risulterà più snello attribuirle ad un gruppo, anziché elencare tutte le volte tutti i media-types. Vediamo dunque nella tabella sottostante quali sono i media-types ed i media-groups con le relative corrispondenze:

 

 

Gruppi

Tipi

continuous

paged

visual

audio

speech

tactile

grid

bitmap

interactive

static

braille

X

X

X

X

X

embossed

X

X

X

X

handheld

X

X

X

X

X

X

X

X

X

print

X

X

X

X

projection

X

X

X

X

screen

X

X

X

X

X

X

speech

X

X

X

X

tty

X

X

X

X

X

tv

X

X

X

X

X

X

X

 

Di seguito diamo invece una sintetica definizione di ciascuno dei media-types:

braille Dispositivi con uso del braille per non vedenti
embossed Stampanti braille
handheld Dispositivi mobili a piccolo schermo, in genere con limitate capacità grafiche
print Stampanti
projection Proiettori a lucidi (es: slides)
screen Schermi di computers
speech Sintetizzatori vocali e di suono
tty Terminali tty
tv Apparecchi televisivi
all Qualsiasi dispositivo

 

Non ci resta che vedere l’elenco delle media-features fornendo nel contempo alcuni esempi di utilizzo:

Media Type

Valore

Significato

Esempio

Note

color visual <colore> N° bit per ciascun colore @media all and (min-color: 4) { … } [1]
min-color
max-color
color-index visual <intero> N° colori della palette @media all and (min-color-index: 256) { … }
min-color-index
max-color-index
aspect-ratio visual, tactile <rapporto> Rapporto larghezza/altezza  della finestra @media screen and (min-aspect-ratio: 1/1) { … } [2]
min-aspect-ratio
max-aspect-ratio
device-aspect-ratio visual, tactile <rapporto> Rapporto larghezza/altezza  del dispositivo @media screen and (device-aspect-ratio: 16/9) { … } [2]
min-device-aspect-ratio
max-device-aspect-ratio
device-height visual, tactile <lunghezza> altezza (px, em ecc.) del dispositivo @media screen and (min-device-height: 800px) { … } [3]
min-device-height
max-device-height
device-width visual, tactile <lunghezza> larghezza (px, em ecc.) del dispositivo @media screen and (max-device-width: 399px) { … } [3]
min-device-width
max-device-width
grid all <intero> indica se il dispositivo è di tipo ‘a griglia’ @media handheld and (grid) and (max-width: 15em) { … } [5]
height visual, tactile <lunghezza> altezza (px, em ecc.) della finestra (non dispositivo) @media (max-height: 480px) { … } [4]
min-height
max-height
monochrome visual <intero> N° bit/pixel in un dispositivo monocromatico @media all and (min-monochrome: 8) { … }
min-monochrome
max-monochrome
orientation visual landscape
portrait
orientamento del dispositivo @media all and (orientation: portrait) { … }
resolution bitmap

<risoluzione>

dpi del dispositivo @media print and (min-resolution: 300dpi) { … }
min-resolution
max-resolution
scan tv progressive interlace processo di scanning dei TV @media tv and (scan: progressive) { … }
width visual, tactile <lunghezza> larghezza (px, em ecc.) della finestra (non dispositivo) @media (max-width: 640px) { … } [4]
min-width
max-width

 

Note.

[1] Se i componenti del colore hanno un numero differente di bit, viene usato il numero minore.

[2] aspect-ratio: 1/1 significa area di visualizzazione quadrata così come device-aspect-ratio: 1/1 significa schermo del dispositivo quadrato; aspect-ratio: 16/9 e device-aspect-ratio: 16/9 significano rispettivamente area di visualizzazione o schermo del dispositivo, landscape con rapporto 16/9.

[3] device-height e device-width (inclusi mi e max) indicano altezza e larghezza dello schermo del dispositivo indipendentemente dalla finestra attiva del browser.

[4] height e width (inclusi mi e max) indicano altezza e larghezza della finestra del browser e non dello schermo. Se si ridemensiona la finestra automaticamente viene applicata la regola corrispondente alla nuova misura.

[5] Assume valore 1 se si tratta di un dispositivo a griglia (TTY o telefono con solo 1 font), altrimenti 0 (falso)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *