- Learn
- Guida CSS di base
- L’attributo media e i tipi di media
L’attributo media e i tipi di media
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:
Se vuoi aggiornamenti su L'attributo media e i tipi di media inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Luca Filigheddu, Sviluppare app per Blackberry
I linguaggi di programmazione che consentono di realizzare app per BlackberryOS 10