L’attributo media e i tipi di media

24 giugno 2013

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.

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:

ValoreDescrizione
allil CSS si applica a tutti i dispositivi di visualizzazione
screenschermo di computer
printpagina stampata
projectionpresentazioni e proiezioni
speechdispositivi a sintesi vocale
braillesupporti basati sull’uso del braille
embossedstampanti braille
handhelddispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche
ttydispositivi a carattere fisso come i terminali
tvvisualizzazione 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:

Tutte le lezioni

1 ... 5 6 7 ... 33

Se vuoi aggiornamenti su L'attributo media e i tipi di media inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su L'attributo media e i tipi di media

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy