Nella lezione precedente abbiamo accennato all'attributo HTML media. Grazie ad esso siamo potenzialmente in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà visualizzata. Una possibilità davvero interessante e che va sempre più acquistando importanza con l'ampliarsi dei dispositivi di fruizione delle pagine HTML e CSS.
Se prima c'era unicamente un browser, oggi ci sono tablet, smartphone, schermi televisivi, console per i videogiochi. Per non parlare dei software usati dai disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.
Sintassi
L'attributo media può accompagnare sia l'elemento <link> sia l'elemento <style>. Ecco due esempi di sintassi:
<link href="print.css" media="print" rel="stylesheet">
<style media="screen">
regole CSS...
</style>Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l'attributo:
| Valore | Descrizione |
|---|---|
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 |
Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale).
È possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:
<link rel="stylesheet" media="print, tv, aural" href="print.css">L'uso più tipico di questa funzionalità consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto:
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">Evoluzione e scenari d'uso
Nelle pratiche di sviluppo più comuni, le potenzialità offerte dall'attributo media e dalla vastità di dispositivi che supporta si riducono notevolmente. Di fatto, ove l'attributo sia utilizzato, i valori oggi sfruttati sono solo all, screen e print. E in effetti, un'applicazione utilissima è proprio quella che prevede l'implementazione di un foglio di stile ad hoc per la stampa. A questo tema è dedicata la lezione 32 di questa guida.
Ciò non significa che questo attributo abbia perso senso, anzi. Il suo uso è attualmente legato soprattutto al contesto delle media query, il meccanismo principe per l'attuazione del cosiddetto responsive design con cui possiamo identificare i dispositivi in base alle loro caratteristiche e funzionalità. Per approfondire l'uso dell'attributo media nelle media query rimandiamo alle seguenti lezioni della Guida CSS3: