3.24
Servire CSS Diversi a seconda del dispositivo di visualizzazione
Sin dalle prime specifiche dei CSS, è stato previsto un meccanismo per l’adattamento dei fogli di stile in base al dispositivo di visualizzazione. Questo meccanismo fa uso dell’attributo “media” e dei vari tipi di media. La sua utilità massima si trova forse nei CSS destinati alla stampa.
Nel contesto dei CSS3, questo meccanismo di base è stato notevolmente migliorato e reso più efficiente, offrendo agli sviluppatori uno strumento estremamente potente per applicare stili specifici non solo in base al dispositivo di visualizzazione, ma anche in base a diverse caratteristiche dello stesso. Questo segna l’era delle “media queries”.
Una “media query” è definita come “una dichiarazione di un tipo di media e zero o più espressioni che determinano se le caratteristiche di un certo media sono valide o non valide”.
Per comprendere meglio, ecco un esempio:
<link rel="stylesheet" media="screen and (color)" href="colore.css" /> Qui stiamo collegando un foglio di stile (colore.css) alla pagina utilizzando l’elemento “link”. L’attributo “media” viene utilizzato per indirizzare lo stile a specifici tipi di dispositivi e non ad altri. La parte tra parentesi rappresenta una “media query”.
Una “media query” include, come già detto, un tipo di media. È possibile scegliere tra i seguenti:
- “all”: il CSS si applica a tutti i dispositivi di visualizzazione;
- “screen”: schermi dei computer;
- “print”: pagine stampate;
- “projection”: presentazioni e proiezioni;
- “speech”: dispositivi con sintesi vocale;
- “braille”: supporti basati sul braille;
- “embossed”: stampanti braille;
- “handheld”: dispositivi mobili con schermi piccoli e limitate capacità grafiche;
- “tty”: dispositivi a caratteri fissi come i terminali;
- “tv”: schermi televisivi.
Nel caso di una media query in cui non viene specificato alcun tipo di media, si assume che la regola o il CSS siano destinati a tutti i tipi di media. Di fatto, il valore di default implicito è “all”.
Nel nostro esempio, abbiamo utilizzato “screen”, rivolgendoci quindi a una categoria particolare: i display dei computer.
Gli operatori logici e le caratteristiche dei media, come descritti nella specifica, formano un’espressione logica che può essere vera o falsa. Questa espressione è vera solo se soddisfa tutte le condizioni specificate nella query.
Per costruire query complesse, è possibile utilizzare operatori logici come “and”, “not” e “only”.
Tornando al nostro esempio:
media="screen and (color)"Dopo aver dichiarato il tipo di media di destinazione (in questo caso “screen”), abbiamo inserito la parola chiave “and”. Il suo significato è simile a quello presente in tutti i linguaggi di programmazione: esegue un’operazione logica di unione tra due espressioni.
La seconda espressione è “(color)”, che rappresenta una delle possibili caratteristiche di uno schermo di computer. In particolare, si riferisce a uno schermo a colori. Vale la pena notare che la seconda parte di una media query, contenente le caratteristiche del tipo di media, deve essere racchiusa tra parentesi tonde.
Quindi, il significato della nostra query è chiaro. Essa sarà vera (il foglio di stile “colore.css” verrà applicato) se la pagina viene visualizzata su uno schermo di computer a colori.
Un altro operatore logico utile è “not”, che nega il risultato della query. Modifichiamo il nostro esempio:
media="screen and (not color)"In questo caso, il foglio di stile “colore.css” verrà applicato solo sui display dei computer che non sono a colori.
La parola chiave “only” è utilizzata principalmente per nascondere il foglio di stile dai browser più datati. Scrivendo:
media="screen and (color)"Si implica che il CSS sia destinato solo al tipo di media “screen”. Ma utilizzando il seguente codice:
media="only screen and (color)"Nascondiamo il CSS ai vecchi browser, che ignoreranno questa dichiarazione.
Una volta compreso il meccanismo, è possibile creare query molto specifiche e complesse, concatenando più espressioni tramite “and”. Ad esempio:
media="screen and (color) and (device-aspect-ratio: 16/9)"In questo caso, la query è vera se la pagina viene visualizzata su uno schermo a colori con un rapporto di aspetto di 16:9.
È possibile raggruppare più media query in una lista, separandole con una virgola:
media="screen and (color), projection and (color)"Infine, ci sono tre modi per dichiarare una media query. Abbiamo già visto il primo, definendo la query nell’attributo “media” dell’elemento “link”:
<link rel="stylesheet" media="screen and (color)" href="colore.css" /> All’interno di un foglio di stile, è possibile impostare una query utilizzando la direttiva “@media”:
@media screen and (color) {
/* Regole CSS qui */
}Infine, è possibile importare un CSS specifico attraverso una media query utilizzando la direttiva “@import” all’interno di un altro foglio di stile:
@import url(colore.css) screen and (color);