cambiare lo stile al volo

Una delle caratteristiche che ha contraddistinto questo blog sia dalla sua infanzia è il modo in cui si adatta ai gusti di chi lo visita. Cosa che adesso ha raggiunto, credo, il livello più alto consentito dalle mie conoscenze. Come forse saprai, il mio sito cambia aspetto una volta al mese: dodici tonalità cromatiche studiate dalla moglie con il mio aiuto, che scandiscono lo scorrere del tempo. Un giorno un affezionato lettore mi pose una domanda: e se io volessi tenere, che so, il tema del mese scorso anche adesso? Oppure vedere quale tema userai il mese prossimo? E così mi misi subito al lavoro, creando una pagina dove ognuno può decidere con quale vestito guardare i miei articoli. Inoltre, per venire incontro a chi (come me sul computer di casa, ebbene si) ancora ha una risoluzione di 1024×768 pixel o minore, ogni abito è disponibile in due taglie: stretta e larga. Che può anch’essa essere scelta al volo e rimanere memorizzata tra le impostazioni del tuo browser.

Non mi basta mai

Non contento, alle 12 tonalità ne ho aggiunte altre due ad alto contrasto, per l’accessibilità: testo chiaro su sfondo scuro e viceversa. Totale: 28 fogli di stile, che personalizzano un’intelaiatura di base (il codice HTML della pagina) che non cambia praticamente mai. E fin qui, nulla di esaltante. La cosa carina è che si può passare al volo dallo stile corrente all’alto contrasto, ad esempio, senza ricaricare la pagina. Oppure puoi impostare l’allineamento del testo (a sinistra o giustificato), o cambiare la dimensione del carattere. Tutto merito di un semplice codice Javascript:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

e degli stili “alternativi” difiniti nel codice sorgente:

<link rel="alternate stylesheet"
      media="screen" type="text/css"
      href="clear_wide.css" title="clear_wide" />
<link rel="alternate stylesheet"
      media="screen" type="text/css"
      href="dark_wide.css" title="dark_wide" />

Guardando quello che fa oggi la gente sul proprio sito con le manipolazioni del DOM grazie a Javascript e le librerie  jQuery, i miei mi sembrano a confronto giochetti da bambini, ma rendono l’idea sulle potenzialità di questi strumenti. Ad esempio, per cambiare al volo l’allineamento del testo, basta una sola funzione:

function justifySwitch(myContentID) {
  var stObj = document.getElementById(myContentID);
  var justifyText;
  if (stObj.style.textAlign == null ||
      stObj.style.textAlign == "" ||
	  stObj.style.textAlign == undefined ||
	  stObj.style.textAlign == "left") {
	justifyText = "justify";
  }
  else {
    justifyText = "left";
  }

  stObj.style.textAlign = justifyText;
}

Si, ma se l’utente Javascript non ce l’ha?

Se la montagna non va da Maometto, sarà Maometto ad andare alla montagna, dice il proverbio. In altre parole, (quasi) tutto quello che non si può fare “lato browser”, lo si può fare sul server. Basta analizzare quello che fa il codice Javascript e tradurlo in PHP: quando l’utente clicca sull’icona, il foglio di stile in uso viene fatto diventare “alternativo” e quello alternativo associato all’icona diventa corrente, impostando allo stesso tempo un cookie per ricordarsi del cambio. L’icona è un normale link, ma nel caso Javascript sia attivo, il click viene intercettato e non inviato al server. Se invece non è attivo, il link contiene un parametro speciale che attiva questo codice PHP:

$myTextAlign = "left";
if ( !empty( $_COOKIE['justifyText'] ) ) {
 $myTextAlign = $_COOKIE['justifyText'];

 // Filter invalid values
 if ( $myTextAlign != 'left' && $myTextAlign != 'justify' ) {
  $myTextAlign = 'left';
 }
}
if ( !empty( $_GET['textalign'] ) ) {
 // Filter invalid values
 if ( $_GET['textalign'] == 'left' || $_GET['textalign'] == 'justify' ) {
  $myTextAlign = $_GET['textalign'];
 }

 // Set cookie values, if needed - this has to be done before sending the output
 setcookie('justifyText', $myTextAlign, time() + 2073600, '/');
}

$myTextSwitchAlign = ($myTextAlign == 'left')?'justify':'left';

Con trucchi analoghi è possibile implementare, lato server, tutte le altre personalizzazioni: cambio della dimensione del font, allineamento del testo, uso dell’alto contrasto e via dicendo.