Un altro dei vantaggi di accessibilità derivanti dall'uso di un HTML non presentazionale accoppiato ai CSS, è costituito dalla possibilità di creare presentazioni alternative di una stessa pagina, destinate a differenti dispositivi, lasciando del tutto invariato il contenuto del documento (X)HTML. Vedremo ora come è possibile, partendo dal file di esempio già realizzato, giungere ad ottenere presentazioni alternative a quella visuale.
Innanzitutto dobbiamo considerare quali sono i tipi di presentazioni alternative possibili per mezzo dei CSS. L'elenco completo è contenuto naturalmente nelle Specifiche CSS2 e comprende i vari tipi di periferica su cui un contenuto web può essere riprodotto. Ecco di seguito, a titolo esemplificativo, alcuni dei "media type" disponibili:
- screen (per pagine destinate ad essere visualizzate sul monitor del computer)
- print (per contenuti da stampare)
- aural (per la riproduzione tramite sintetizzatore vocale)
- handheld (per la riproduzione su computer palmari)
L'uso dell'HTML presentazionale, che – come dicevamo in precedenza – è ancora diffusissimo, equivale per lo più a creare pagine "ingessate", tarate unicamente per un ben preciso tipo di riproduzione a schermo. Se per esempio lo sviluppatore "vecchia maniera" ha bloccato la pagina web su una larghezza orizzontale piuttosto ampia, niente di più facile che l'utente si ritrovi una pagina stampata monca, in cui i contenuti della parte destra appaiono troncati, non rientrando nell'area di stampa prevista dal formato della carta utilizzato dalla stampante.
Grazie ai CSS, possiamo invece salvare capra e cavoli: definire cioè caratteristiche per la presentazione a schermo differenti da quelle per la presentazione a stampa, in modo che il contenuto del documento possa venire riprodotto al meglio, senza perdite di informazione, sia in un caso che nell'altro.
Per esempio, nel modello di pagina illustrato in figura 1, potrebbe essere utile eliminare dalla presentazione a stampa sia il menu di navigazione sia i link ad altri siti: si tratta infatti di contenuti che hanno senso solo durante la navigazione sul Web. Rimuoverli renderebbe inoltre più breve lo stampato, in quanto la colonna centrale potrebbe allargarsi a tutta pagina.
Per ottenere questo risultato, creiamo un secondo foglio di stile esterno alternativo al precedente, e chiamiamolo "stile2.css". Partiamo da una copia esatta del file "stile1.css", all'interno del quale operiamo in tutto tre modifiche.
1. Sostituiamo alle proprietà di stile definite per la colonna di sinistra (il menu di navigazione) e per quella di destra (i link ad altri siti), la seguente riga: #corposin, #corpodes {display:none} In questo modo, tutto il contenuto delle due colonne diventerà invisibile.
2. Cancelliamo le varie definizioni di stile relative ai blocchi presenti all'interno delle due colonne da rendere invisibili. Questa operazione non ha un effetto diretto sulla stampa, ma serve unicamente a ridurre i tempi di caricamento del file CSS alternativo: perché infatti far caricare all'utente definizioni di stile che non verranno utilizzate?
3. Eliminiamo dalle proprietà di stile del blocco che definisce la colonna centrale (che contiene il testo che vedremo in stampa) il padding sinistro e destro, che servivano a lasciare lo spazio necessario a visualizzare le due colonne che abbiamo reso invisibili. Era: #princip {padding-left:25%; padding-right:25%; padding-top:5px} Lasciamo soltanto: #princip {padding-top:5px}
Ciò fatto, colleghiamo il nuovo file CSS al documento XHTML nel modo seguente:
<link media="print" rel="stylesheet" type="text/css" href="stile2.css" />
E poi modifichiamo il precedente collegamento al file "stile1.css", inserendo il tipo di media appropriato:
<link media="screen" rel="stylesheet" type="text/css" href="stile1.css" />
Grazie a questo semplice sistema, i browser dotati di adeguato supporto per i fogli di stile saranno in grado di selezionare automaticamente il file CSS adatto alla periferica, usando quello identificato da media="screen" per la presentazione a monitor e quello identificato da media="print" per la presentazione a stampa.
Esistono anche altri modi per collegare dei fogli di stile dipendenti dal tipo di media ad un file (X)HTML: la regola ‘@import' o la regola ‘@media', inserite all'interno di un elemento STYLE posto nella sezione HEAD del documento. Per chi fosse interessato ad apprendere questi altri metodi, il capitolo 7 delle Specifiche CSS2 mostra come procedere.