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:
7 / 33

I selettori CSS di base: universale, di tipo, id, classi