3.24
Dove possiamo intervenire sugli attributi delle Media Queries
Nella lezione precedente, abbiamo esaminato le nozioni di base relative alle media queries. Tuttavia, per sfruttare appieno le loro potenzialità, è essenziale comprendere le caratteristiche dei media su cui possiamo intervenire per indirizzare uno stile specifico.
Width Il termine “width” fa riferimento alla larghezza dell’area di visualizzazione del documento. In un normale browser web, questa larghezza è rappresentata dal viewport e non è correlata alle dimensioni fisiche dello schermo del dispositivo. I valori di “width” possono essere espressi in qualsiasi unità di misura.
Ad esempio:
@media screen and (width: 400px) { /* Regole CSS */ }La query sopra applica le regole CSS quando la larghezza della finestra è di 400 pixel.
Inoltre, “width” può essere preceduto dai prefissi “min-” e “max-“, ottenendo così “min-width” e “max-width”. Questa è una caratteristica utile nella progettazione di layout. L’esempio seguente applica uno stile specifico quando le dimensioni sono comprese tra 400px e 1024px:
@media screen and (min-width: 400px) and (max-width: 1024px) { /* Regole CSS */ }Height L’attributo “height” descrive l’altezza dell’area di visualizzazione del documento, e può essere modificato utilizzando i prefissi “min-” e “max-“.
Device-width Con “device-width” si fa riferimento alla larghezza dell’intera area di rendering di un dispositivo. Questo valore rappresenta la larghezza totale dello schermo del dispositivo, indipendentemente dalle dimensioni dell’area di visualizzazione del documento.
Ad esempio, si può utilizzare una media query per indirizzare uno stile specifico a dispositivi con una larghezza massima di 480px:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" type="text/css" />Device-height “Device-height” descrive l’altezza dell’intera area di rendering di un dispositivo, con la possibilità di utilizzare i prefissi “min-” e “max-“.
Orientation L’attributo “orientation” indica se il dispositivo è in modalità “landscape” (larghezza maggiore dell’altezza) o “portrait” (altezza maggiore della larghezza). I valori possibili sono “landscape” e “portrait”.
Ecco un esempio di media query che serve stili CSS diversi a un iPad a seconda della sua orientazione:
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)" href="ipad-portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" href="ipad-landscape.css" type="text/css" />Aspect-ratio “Aspect-ratio” definisce il rapporto tra la larghezza (width) e l’altezza (height) dell’area di visualizzazione di un documento, consentendo l’uso dei prefissi “min-” e “max-“. I valori si esprimono attraverso due numeri interi separati da una barra obliqua, ad esempio, 3/4 o 16/9.
Device-aspect-ratio “Device-aspect-ratio” descrive il rapporto tra la larghezza (device-width) e l’altezza (device-height) dell’area di rendering di un dispositivo. Anche questa caratteristica accetta i prefissi “min-” e “max-“.
Color L’attributo “color” indica il numero di bit per ciascuna componente colore sul dispositivo di output. In termini pratici, può essere utilizzato per indirizzare i CSS ai dispositivi che supportano il colore. Ad esempio:
@media all and (color) { /* Regole CSS */ }Color-index “Color-index” specifica il numero di colori presenti nella tavolozza supportata da un dispositivo, con la possibilità di utilizzare i prefissi “min-” e “max-“.
Monochrome L’attributo “monochrome” indica il numero di bit per pixel su un dispositivo monocromatico (scala di grigi).
Resolution “Resolution” descrive la risoluzione (densità di pixel) del dispositivo di output e può essere espressa in dpi (punti per pollice) o dpcm (punti per centimetro). Si possono utilizzare i prefissi “min-” e “max-“.
Scan L’attributo “scan” è valido solo per gli schermi televisivi, rappresenta il tipo di scansione, che può essere “progressive” o “interlace”.
Grid “Grid” indica se il dispositivo è di tipo bitmap o “a griglia”, come certi terminali monocromatici e schermi per cellulari con un solo font.
Ecco una tabella che riporta il supporto delle media queries da parte dei principali browser:
| Media queries | Internet Explorer | Firefox | Safari | Google Chrome | Opera |
|---|---|---|---|---|---|
| width | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| height | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-width | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-height | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| device-aspect-ratio | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 9.0+ |
| color | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| color-index | 9.0+ | 3.5+ | 4.0+ | 2.0+ | 10.5+ |
| monochrome | 9.0+ |
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);