CSS: l’attributo media

Nella precedente lezione abbiamo visto come integrare delle istruzioni CSS all’interno di un documento HTML. In questa lezione presenteremo un importante attributo che è 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 sottolineare 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 indifferentemente.

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:

<link rel="stylesheet" media="screen, print" href="style.css">

Da un punto di vista prettamente pratico l’utilizzo dell’attributo media assume una certa importanza soprattutto per la definizione di regole apposite per la stampa. Nella normalità dei casi, infatti, l’attributo in oggetto viene omesso oppure utilizzato limitatamente ai valori "screen" e "print". Gli altri valori, nella realtà dei fatti, non vengono quasi mai utilizzati se non per far fronte ad esigenze davvero specifiche.

Con la nascita di CSS3 questo attributo, in realtà, ha ampliato non poco la sua importanza in quanto diventa il protagonista di quella tecnica di web-design che prende il nome di responsive design. Questo argomento, tuttavia, esula dal nostro ambito quindi, per il momento, ci limiteremo a questo accenno senza approfondire ulteriormente.