Già nelle prime specifiche dei CSS era previsto un meccanismo adatto a servire fogli di stile ad hoc a seconda del dispositivo di visualizzazione. È quello basato sull'utilizzo dell'attributo media e dei diversi tipi di media. L'ambito di applicazione in cui tale tecnica si è rivelata più utile è forse quello dei CSS per la stampa.
Nei CSS3 il meccanismo di base è stato notevolmente migliorato e reso più efficace, fornendo agli sviluppatori uno strumento molto potente per servire stili specifici non solo in base ai dispositivi di fruizione ma anche a diverse caratteristiche degli stessi. Si entra così nell'epoca delle media queries.
Com'è fatta una media query
Come recita la definizione che appare nella specifica, "una media query consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media".
Molto più semplice far parlare un esempio:
<link rel="stylesheet" media="screen and (color)" href="colore.css" />Stiamo collegando alla pagina un foglio di stile (colore.css) attraverso l'elemento link.
Usiamo l'attributo media per indirizzarlo a certi tipi di dispositivi e non ad altri.
Nel contesto dell'attributo media abbiamo definito una media query. Analizziamola.
Tipi di media
Come si accennava nella definizione, una media query prevede innanzitutto l'uso di un tipo di media. Possiamo scegliere tra questi:
all: il CSS si applica a tutti i dispositivi di visualizzazione;screen: schermo di computer;print: pagina stampata;projection: presentazioni e proiezioni;speech: dispositivi a sintesi vocale;braille: supporti basati sull'uso del braille;embossed: stampanti braille;handheld: dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche;tty: dispositivi a carattere fisso come i terminali;tv: visualizzazione su schermi televisivi.
Se in una media query non si dichiara alcun tipo di media specifico, si assume che la regola o il CSS siano rivolti a tutti i tipi di media. In pratica, il valore implicito di default è all.
Nel nostro esempio abbiamo usato screen, rivolgendoci dunque ad una categoria ben specifica: gli schermi di computer.
Operatori logici e caratteristiche dei media
Sempre stando alla specifica, una media query è un'espressione logica che può essere vera o falsa. È vera se soddisfa tutte le condizioni espresse nelle query.
Per costruire query complesse si può fare ricorso a operatori logici come and, not e only.
Torniamo al nostro esempio:
media="screen and (color)"Dopo aver dichiarato il tipo di media da usare come target (screen), abbiamo inserito la parola chiave and. Il suo significato non è diverso da quello comune e presente in tutti i linguaggi di programmazione: esegue un'unione logica tra due espressioni.
La seconda espressione è (color). color rappresenta una delle tante caratteristiche possibili di uno schermo di computer. Nello specifico designa uno schermo a colori. A livello sintattico si noti che la seconda parte di una media query, quella con le caratteristiche del tipo di media, va posta tra parentesi tonde.
A questo punto il significato della nostra query è chiaro. Essa sarà vera (ovvero sarà applicato il foglio di stile colore.css) se la pagina viene visualizzata su uno schermo di computer a colori.
Un altro operatore logico utile è not. Esso nega il risultato della query. Modifichiamo il nostro esempio:
media="screen and (not color)"Il foglio di stile colore.css sarà applicato su schermi di computer che non siano a colori.
La parola chiave only ha invece come funzione primaria quella di nascondere il foglio di stile agli user agent più datati.
Scrivendo infatti
media="screen and (color)"è implicito che il CSS va rivolto solo al tipo di media screen.
Ma usando questo codice
media="only screen and (color)"nascondiamo il CSS ai vecchi browser, che salteranno la dichiarazione.
Una volta compreso il meccanismo si possono costruire query molto specifiche e complesse, per esempio concatenando tramite and più espressioni:
media="screen and (color) and (device-aspect-ratio: 16/9)"La query è vera se la pagina viene visualizzata su uno schermo a colori con aspect ratio di 16/9.
Più media query possono essere raggruppate in una lista separandole con una virgola:
media="screen and (color), projection and (color)"Come e dove dichiarare una media query
Ci sono tre modi per dichiarare una media query.
Abbiamo già visto il primo. Si definisce la query nel contesto dell'attributo media dell'elemento link:
<link rel="stylesheet" media="screen and (color)" href="colore.css" />All'interno di un foglio di stile, poi, si può impostare una query facendo ricorso alla direttiva @media:
@media screen and (color) {
/* qui vanno le regole CSS */
}Infine, si può importare un CSS specifico attraverso una media query usando la direttiva @import all'interno di un altro foglio di stile:
@import url(colore.css) screen and (color);