Skin alternative in JS/CSS
Dare la possibilità agli utenti di scegliere l'aspetto del sito è certamente un bel servizio, capace anche migliorare l'accessibilità per gli utenti con problemi alla vista, come gli ipovedenti. Ciò è possibile grazie ai CSS e al DOM.
Un sito con molte facce
Abbiamo più volte visto come i CSS permettano di separare i contenuti di un sito dal suo layout. Essendo la grafica distinta dal codice (X)HTML della pagina, è possibile ottenere aspetti differenti semplicente associando differenti fogli di stile come nella pagina di esempio associata all'articolo.
Per ottenere questo risultato, l'ideale sarebbe utilizzare uno script lato server (PHP, JSP, ...). Purtroppo non sempre ciò è possibile, poiché non tutti i siti hanno a disposizione il supporto di tali linguaggi sul proprio server. Una valida alternativa è utilizzare uno script in Javascript che funzioni direttamente sul browser dell'utente. Lo script presentato in questo articolo funziona solo se i cookie sono attivi e se il browser ha un valido supporto del DOM come ad esempio IE5, IE6, Mozilla 1, Netscape 7.
Come associare il foglio di stile
Il foglio di stile deve essere associato col seguente codice:
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
E' importante che il foglio di stile sia collegato specificando media="screen" (E' in generale buona norma specificare il media a cui il foglio di stile è associato).
I lettori più esperti noteranno che ciò non permette l'utilizzo del metodo @import per escludere fogli di stile elaborati a browser quali Netscape Navigator 4. In realtà ciò può facilmente essere ottenuto utilizzando il metodo @import direttamente nel foglio di stile.
Lo script
Il codice Javascript, per semplicità incluso nella pagina di esempio, è il seguente
function createCookie(name,value,days) {
// istruzioni per creare il cookie, non interessa ai fini dell'articolo
}
function readCookie(name) {
// istruzioni per leggere il cookie, non interessa ai fini dell'articolo
}
// memorizzazione del foglio di stile scelto e aggiornamento della pagina
function setCSS(nome_file_css) {
createCookie('skinUtente',nome_file_css,365);
location.reload();
}
// impostazione del foglio di stile
function setCSShref(nome_file_css) {
var link_ = document.getElementsByTagName("link");
for ($i=0;$i<link_.length;$i++)
if(link_[$i].media=="screen") link_[$i].href=nome_file_css+".css";
}
// scelta del foglio di stile
window.onload = function() {
nome_file_css = readCookie('skinUtente');
if(nome_file_css) setCSShref(nome_file_css);
}
Analizziamo il codice cominciando dalla memorizzazione del foglio di stile scelto e aggiornamento della pagina. Quando la funzione setCSShref(nome_file_css) viene invocata, viene creato un cookie che memorizza nella variabile skinUtente il nome del file CSS (passato attraverso la variabile nome_file_css) che si vuole attivare per specificare il layout della pagina e viene ricaricata la pagina (ciò è necessario con Internet Explorer ma non con Mozilla).
Quando la pagina è (ri)caricata viene letto il nome del file CSS dal cookie e memorizzato nella variabile nome_file_css. Se il cookie esiste viene invocata la funzione setCSShref(nome_file_css).
La funzione setCSShref(nome_file_css) si occupa di impostare il giusto foglio di stile modificando il valore del parametro href nel tag <link rel="stylesheet" type="text/css" href="stile.css" media="screen" />. In pratica lo script memorizza nella variabile link_ tutti i tag LINK presenti nel documento e identifica quello su cui agire attraverso il parametro media="screen". Una volta identificato il giusto tag LINK su cui agire, altera il parametro href per selezionare il giusto foglio di stile.
Implementazione
L'implementazione dello script è estremamente semplice. Si supponga di aver creato tre differenti fogli di stile:
- skin1.css: il foglio di stile per la skin di default;
- skin2.css: il foglio di stile per una skin alternativa;
- accessibile.css: il foglio di stile creato appositamente per favorire la navigazione a visitatori con problemi della vista come gli ipovedenti e i daltonici (dettagli su come creare un foglio di stile adatto a questo tipo di utenti vi consiglio di leggere il breve ma ottimo saggio "Ipovisione e accessibilità e fruibilità del web").
Per selezionare i vari CSS, dunque per impostare le varie, skin è sufficiente creare dei link che invochino la funzione setCSS(nome_file_css), dove nome_file_css è il nome del file che si vuole attivare privo dell'estensione .css. Un'esempio di codice (X)HTML per la creazione dei link potrebbe essere il seguente:
<a href="javascript:setCSS('skin1')">Skin 1</a> |
<a href="javascript:setCSS('skin2')">Skin 2</a> |
<a href="javascript:setCSS('accessibile')">Alta accessibilità</a>
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
