[Guida CSS #4] Come utilizzare l’ attributo media


[Guida CSS #4] Come utilizzare l' attributo media

Nell’ ultima guida abbiamo parlato dell’ attributo media e, come preludio, vi abbiamo spiegato qual’è la sua finalità, ossia impostare diversi fogli di stile in base al supporto su cui la nostra pagina web verrà distribuita. Difatti negli ultimi anni, considerando il grande numero di dispositivi diversi utilizzati per navigare nel web, questa possibilità è diventata molto importante per i web designer. Presto capirete perché.

L’ attributo media può essere utilizzato sia con l’ elemento link, sia con l’ elemento style e, inoltre, come vi ho scritto nella guida precedente, è facoltativo.

<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />
<style type=”text/css” media=”screen”>…</style>

Quelli che vedete in alto sono solamente due esempi in cui a media è stato dato il valore print e screen. Se vi state chiedendo quali sono i rispettivi significati, qui di seguito trovate tutti gli attributi di media con i relativi utilizzi:

  • all: è il valore di default. Essendo media facoltativo, quando non lo utilizzate verrà dato all’ attributo automaticamente il valore all. Esso vale per tutti i dispositivi che visualizzano la vostra pagina web;
  • screen: è il valore utilizzato di norma per indicare il CSS da applicare a qualunque visualizzazione tramite browser web;
  • print: questo valore verrà applicato solamente sui documenti in stampa;
  • projection: valore utilizzato per le visualizzazioni a tutto schermo o per le proiezioni;
  • aural: valore utilizzato per i browser a sintesi vocale;
  • embossed: utilizzato per stampanti braille;
  • braille: per dispositivi basati sull’ utilizzo del braille;
  • handheld: è il valore utilizzato per la visualizzazione su palmari e dispositivi mobili;
  • tty: utilizzato per i dispositivi a carattere fisso;
  • tv: valore utilizzato per le web tv.

Naturalmente potete affidare ad un foglio di stile più valori e, di conseguenza, esso verrà applicato su più dispositivi. I valori di media in questo caso andranno separati da virgola come nell’ esempio qui di seguito:

<link rel=”stylesheet” type=”text/css” media=”print, screen, tty” href=”print.css” />

Se, invece, voleste utilizzare più fogli di stile da applicare a dispositivi diversi dovrete procedere come nell’ esempio qui di seguito:

<link rel=”stylesheet” type=”text/css” media=”tv” href=”tv.css” />
<link rel=”stylesheet” type=”text/css” media=”print, screen, tty” href=”print.css” />

<- Lezione precedente (4 metodi per inserire i fogli di stile in un documento)
Lezione successiva (Utilizzare i fogli di stile alternativi) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *