Diversi media, diversi stili

Fra le diverse opportunità offerte dai fogli di stile, una delle più importanti e interessati è la possibilità di specificare come un documento deve apparire in diversi media: schermo, carta, palmare, dipositivo braille, ecc.

Verranno qui brevemente introdotti i diversi tipi di media e saranno illustrate le tecniche che permettono di associare differenti fogli di stile a differenti tipi di media.

Tipi di media

I tipi di media riconosciuti dai fogli di stile sono:

all: tutti i dispositivi;
aural: sintetizzatori vocali (usati soprattutto dai non vedenti);
braille: dispositivi braille a lettura tattile (usati soprattutto dai non vedenti);
embossed: stampanti braille;
handheld: dispositivi palmari;
print: stampati e 'anteprima di stampa';
projection: proiettori per presentazioni;
screen: lo schermo di un pc;
tty: dispositivi con caratteri a larghezza fissa;
tv: televisori.

Se la pagina è ben progettata e l'(X)HTML è ben strutturato, non sarà necessario specificare un CSS per ogni dispositivo.

Sintetizzatori vocali

E' possibile controllare i tempi, le voci, i suoni, lo spazio (sound surrounds), il volume e diverse altre caratteristiche dei sintetizzatori vocali in maniera anche molto elaborata. Per una guida approfondita, ma di non facile lettura, alle diverse caratteristiche dei fogli di stile per i dispositivi aural si consiglia la guida del W3C, disponibile al seguente indirizzo: http://www.w3.org/TR/CSS21.

Dispositivi palmari

Nell'impostare un CSS per un dispositivo palmare bisogna considerare lo schermo ha dimensioni ridotte ed è, solitamente, in bianco e nero. E' dunque opportuno evitare di "giocare" troppo con i colori ed è bene dimensionare con attenzione le varie parti del layout, evitando di portare su schermo elementi a larghezza fissa troppo elevata non ridimensionabili, come ad esempio i banner 468x60. Una soluzione potrebbe essere del tipo:

.banner468x60 { display:none; } #ElementoTroppoLargo { display:none; }

Se la pagina è ben progettata, essa sarà già pronta per i PDA, come per qualsiasi altro dispositivo. In generale non è necessario creare dei CSS troppo elaborati per dispositivi dalle risorse limitate come i PDA.

Le stampanti

Le pagine web, spesso pensate solo per la visione su schermo, possono risultare inadatte alla stampa. In questo caso, l'utilizzo di un opportuno foglio di stile può risolvere numerosi problemi. Alla realizzazione dei fogli di stile per le stampanti è stato dedicato un'apposito articolo: "Pagine pronte per la stampa con i CSS".

Dispositivi con caratteri a larghezza fissa

Questi dispositivi hanno capacità di visualizzazione molto limitate, poiché sono basati sulla visualizzazione di caratteri fissi preimpostati. Per questi dispositivi, come raccomandato dal W3C, non si dovrebbero utilizzare unità espresse in pixel. Come per i PDA, se la pagina è ben progettata, si può evitare di realizzare un foglio di stile particolare per questi dispositivi.

Associare un CSS ad un media

Per associare un particolare foglio di stile ad un particolare media si può autilizzare uno dei seguenti metodi:

<head> [..] <style type="text/css" media="screen"> @import "schermo.css"; </style> <link rel="stylesheet" type="text/css" media="print" href="stampante.css" /> <link rel="stylesheet" type="text/css" media="aural, handheld" href="aural_e_pda.css" /> [..] </head>

Attenzione!

Come già detto più volte in questo articolo, se la pagina è ben progettata, si può evitare di realizzare un foglio di stile particolare per ogni tipo di media. Infatti un CSS mal progettato, specie per i dispositivi aural, rischia di rendere poco accessibile una pagina che, con non troppa fatica (poiché non è poi così difficile), era, senza i css, comodamente accessibile a tutti. Nei fogli di stile, specialmente in quelli dedicati ai dispositivi diversi da 'screen', di dovrebbe essere più semplici possibile, introducendo solo ciò che si ritiene necessario alla visualizzazione e utile all'utente.

Commenti sull'articolo

G.T. -- ultima revisione: 30.09.2002