E’ possibile aggiungere tanto al tag <style> che al tag <link>. L’attributo in questione è media ed il suo compito è quello di definire il supporto cui applicare le regole contenuto nel foglio di stile. In pratica, attraverso l’attributo media, è possibile importare nella pagina più fogli di stile da utilizzare alternativamente a seconda del dispositivo di fruizione del contenuto utilizzato dall’utente.
Volendo fare un esempio pratico, sarà possibile definire un CSS apposito per la visualizzazione del contenuto sul monitor di un computer, uno per i dispositivi mobili, uno per la stampa del documento, ecc. Vediamo qualche esempio:
<link rel="stylesheet" media="print" href="stampa.css"> <style type="text/css" media="handheld"> ... </style>
E’ importante dire che l’attributo media è facoltativo, in mancanza il browser gli assegnerà il valore di default “all” il che significa che le regole CSS definite nel foglio di stile verranno applicate a tutti i dispositivi.
Vediamo di seguito i possibili valori che può assumere l’attributo media:
- all – ogni dispositivo;
- braille – dispositivi basati su braille;
- embossed – stampanti braille;
- handheld – dispositivi portatili con display piccolo (ad esempio palmari o telefoni cellulari);
- print – stampanti;
- projection – presentazioni e proiezioni;
- screen – schermo del computer;
- speech – dispositivi di sintesi vocale;
- tty – terminali;
- tv – televisori.
Volendo è possibile assegnare divseri media allo stesso foglio di stile, per farlo si crea un elenco di voci separate da una virgola:
Da un punto di vista prettamente pratico l’utilizzo dell’attributo media assume una certa importanza soprattutto per la definizione di regole. Nella normalità dei casi, infatti, l’attributo in oggetto viene omesso oppure utilizzato limitatamente ai valori “screen” e “print”.
<link rel="stylesheet" media="screen, print" href="style.css"
