CSS  »  Guide  »  Guida CSS di base 

Nella lezione precedente abbiamo accennato all'attributo media. Grazie ad esso siamo in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà distribuita. Una possibilità davvero interessante e che andrà sempre più diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine (X)HTML.

Dove prima c'era unicamente un browser, domani potranno sempre più esserci palmari, cellulari e altri dispositivi. Per non parlare dei software usati da 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> che l'elemento <STYLE>. Ecco due esempi di sintassi:

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

Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l'attributo:

• all. Il CSS si applica a tutti i dispositivi di visualizzazione.
• screen. Valore usato per la resa sui normali browser web.
• print. Il CSS viene applicato in fase di stampa del documento.
• projection. Usato per presentazioni e proiezioni a tutto schermo.
• aural. Da usare per dispositivi come browser a sintesi vocale.
• braille. Il CSS viene usato per supporti basati sull'uso del braille.
• embossed. Per stampanti braille.
• handheld. Palmari e simili.
• tty. Dispositivi a carattere fisso.
• tv.Web-tv.

Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale). E' possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:

<link rel="stylesheet" type="text/css" 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" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print, tv, aural" href="print.css" />

Esempi

Un'applicazione immediatamente fruibile, a patto di non usare browser di quarta generazione, è quella che prevede l'uso di un foglio di stile per la stampa. Le motivazioni per una simile soluzione possono essere molteplici. L'uso di caratteri o colori particolari, la presenza nella pagina di elementi che vogliamo non far comparire sulla carta, può portare alla necessità di adottare un CSS speciale. Un primo esempio lo potete valutare seguendo questo link. Provate a stamparlo. Il testo avrà caratteristiche diverse rispetto a quello che vedete sullo schermo: font, colore, dimensioni in punti e non in pixel. Una controprova: stampate questo documento, privo di fogli di stile speciali. Nessun cambiamento rispetto a quanto vedete sullo schermo.

Per un approfondimento trovate l'articolo Stampe perfette con i CSS nella sezione PRO di HTML.it.

Una risorsa eccellente sull'argomento: Code Style media monitor. Articoli, linee guida, test sull'uso dei fogli di stile basati sui diversi media.

Altri articoli

Altre guide

Altre newsletter