Tutto sul Body Switcher

Link copiato negli appunti

In rete capita sempre più spesso di imbattersi nei cosidetti "modificatori di stile" (ingl: Style Switcher). Sono strumenti che permettono di cambiare l'intero aspetto di una pagina o semplicemente di ingrandirne il testo sfruttando i CSS. Per un Web Designer, disporre di questi mezzi è sicuramente una comodità, ma non sempre è facile districarsi fra le decine di varianti realizzate. Per questo motivo faremo chiarezza su una delle varianti più funzionali: il cosiddetto Body Switcher, pubblicato su Alistapart da Andy Clarke e James Edwards.

Per favorire una migliore comprensione della tecnica, analizzeremo gradualmente alcuni esempi fino ad implementare un vero e proprio "layout switcher", di cui possiamo vedere uno screenshot:

Figura 1 - Screenshot dell'esempio
Preview del Layout Switcher

Prima di cominciare, però, mi sembra opportuno spiegare il motivo per cui questa soluzione è più conveniente rispetto a quella implementata nello style switcher (in JavaScript) spiegato nell'articolo Style Switcher per tutti.

Style Switcher di Paul Sowden

Uno dei primi "modificatori di stile" in Javascript è stato pubblicato su Alistapart dal giovane inglese Paul Sowden. Questo script ha riscosso così tanto successo da essere seguito poi da tante varianti: il funzionamento però si è sempre basato sull'utilizzo "creativo" dei fogli di stile alternativi. Nonostante si sia rivelata una soluzione "innovativa" nel 2001, quando è stata introdotta, con il passare del tempo alcuni sviluppatori si sono accorti delle limitazioni di questa soluzione. Vediamo assieme le più significative.

Un file CSS per ciascun stile

L'uso di questo metodo prevede obbligatoriamente un file CSS per ogni stile che si vuole applicare ad una pagina html. Per fare un esempio: se il cliente dovesse chiedere la realizzazione di 10 possibili colorazioni (più la versione per ipovedenti) per un sito aziendale, noi dovremmo necessariamente realizzare 11 file CSS distinti.

Figura 2 - File CSS da applicare al sito
Stili da implementare

Se in siti dalla struttura complessa questo approccio permette una migliore organizzazione, in siti semplici può risultare scomodo perché si rischia di avere numerosi fogli di stile dal peso molto ridotto, in cui le regole CSS sono davvero in quantità esigua.

Uso eccessivo di markup

Il difetto appena visto implica anche un altro problema: un uso eccessivo di markup. Per ciascun stile che si intende applicare, infatti, è necessario dichiarare il collegamento al CSS esterno con il seguente codice:

Il server è quindi obbligato a caricare singolarmente ciascun file CSS, piuttosto che un unico foglio di stile che contenga le regole di tutte le possibili varianti grafiche.

La soluzione: Body Switcher

La soluzione ai difetti appena elencati si può trovare nel Body Switcher, la migliore evoluzione che l'originale Style Switcher potesse avere.

Il primo passo da compiere per poterlo implementare nella nostra pagina HTML è il download della versione più recente dello script da questa pagina (riquadro "Get the script"). Il secondo passo è scegliere una delle tre interfacce disponibili:

Original: composta da un menu di opzioni (select)
The Director's Cut: composta da una lista di definizione
The Radio Edit: composta da un'insieme di radio buttons

Panoramica delle interfacce implementabili

Ed infine il tipo di implementazione:

Standard Mode: che sfrutta l'elemento <body> per modificare lo stile. Richiede un singolo file CSS ed il suo funzionamento sarà spiegato successivamente
Load Mode: che sfrutta l'elemento <link>, comunemente utilizzato per includere i fogli di stile esterni, per caricare i files CSS solo quando richiesto (on-demand). Praticamente è un'evoluzione del classico "Style Switcher"
Integrate Mode: variante del noto Style Switcher di Paul Sowden

In questo articolo ci soffermeremo sull'implementazione "Standard Mode" perché rappresenta realmente il concetto di Body Switcher espresso nell'articolo di Alistapart, mentre gli altri due metodi sono stati aggiunti successivamente per una questione di completezza. Per chi vuole comunque informarsi c'è l'ottima documentazione online dello script, redatta dall'autore James Edwards.

Fatta questa premessa, ora non ci resta che implementare lo script nella nostra pagina HTML.

Implementare lo script

Per rendere più facile l'apprendimento, affronteremo l'argomento con il primo esempio, un semplice cambio di colore dell'intestazione h1 e dei link a (con rispettiva pseudo-classe a:hover).

Includere i file JS

Per implementare correttamente lo script è necessario includere tre differenti files JS:

Script per la configurazione, iotbs2-key.js
Script che identifica l'interfaccia che sarà iotbs2-original.js per "Original", iotbs2-directors.js per "The Director's Cut", iotbs2-radio.js per "The Radio Edit"
Script che racchiude tutte le funzioni principali del Body Switcher, iotbs2-core.js

Dato che in questo esempio (e nei successivi) abbiamo utilizzato l'interfaccia "The Director's Cut" e l'implementazione "Standard Mode", le dichiarazioni all'interno dell'elemento <head> sono le seguenti:

Attenzione: per un corretto funzionamento dello script, l'ordine con cui inseriamo i collegamenti deve essere rispettato, come nel riquadro di codice visto qui sopra.

Aggiungere i controlli per lo switching

I controlli per lo switching, qualunque sia l'interfaccia scelta, vengono generati via Javascript tramite la funzione bodySwitcher. Essi vengono posizionati all'interno di un div "contenitore", a cui deve essere associato un ID univoco:

Questo div può avere altri contenuti al suo interno, quindi non deve essere necessariamente vuoto. In tal caso, i controlli dello switcher verranno aggiunti in fondo al contenuto già presente.

Preparare ed ottimizzare il CSS

È possibile differenziare i vari stili di un'intera pagina con un singolo file CSS? In realtà i fogli di stile, per come sono stati concepiti, permettono anche questo. Vediamo come.

Utilizzo di classi e IDs

La chiave della soluzione sta nell'utilizzo delle classi e/o degli IDs (o identificatori). Per verificare quanto detto basta analizzare il codice HTML del nostro esempio: all'elemento <body> abbiamo applicato una classe con la quale possiamo gestire diversi stili:

Grazie a questa classe, per esempio, possiamo manipolare lo sfondo e il colore del testo:

CSS

body.default {background: #FFF; color: #444; }

È già un passo avanti, ma gli strumenti che abbiamo a disposizione permettono di fare molto di più.

Controllo su elementi discendenti

Uno di questi è proprio il selettore di elementi discendenti (ingl: descendant selector), con cui possiamo regolare l'aspetto di tutti gli elementi racchiusi all'interno del tag <body>, ottendendo un controllo pressoché totale sullo stile della pagina. Nel primo esempio, abbiamo sfruttato questo selettore per controllare il colore dell'intestazione e dei link:

body.default h1 { border-bottom: 5px solid #999; color: #444; }
body.default a { color: #000; border-bottom: 2px solid #000; }
body.default a:hover { color: #333; border-color: #999; }

Disporre correttamente le regole CSS

Una buona organizzazione delle regole CSS facilita l'analisi e permette di individuare rapidamente gli errori di progettazione. Come potete osservare dal file CSS dell'esempio, esse seguono schema ben preciso:

Le regole generali

La prima cosa da fare è dichiarare le regole CSS comuni a tutti gli stili per evitare, successivamente, la scrittura di codice superfluo. Per esempio, se volessimo definire la dimensione dell'intestazione in tutte le varianti grafiche, sarebbe illogico aggiungere la proprietà ad ogni singola classe:

body.default h1 {font-size: 50px; /* altre proprietà */ }
body.rosso h1 {font-size: 50px; /* altre proprietà */ }

Definire la proprietà a livello generale con il selettore di elementi, invece, permetterebbe un notevole risparmio di codice inutile, come effettivamente è stato fatto nell'esempio:

h1 { font-size: 50px; }
body.default h1 { border-bottom: 5px solid #999; color: #444; }
body.rosso h1 { border-bottom: 5px solid #F00; color: #900; }

Attenzione: bisogna sempre definire una classe "default" che rappresenta lo stile "principale" della pagina. Il motivo è molto semplice: se applichiamo un nuovo stile usando il Body Switcher, lo script rimpiazza lo stile originale, che non si potrebbe più ripristinare in assenza di una classe già definita.

Quindi scrivere le regole in questo modo è fortemente sconsigliato:

h1 { border-bottom: 5px solid #999; color: #444; }
a { color: #000; border-bottom: 2px solid #000; }
a:hover { color: #333; border-color: #999; }

Se invece si segue questo metodo, un eventuale ripristino dello stile originale avverrebbe senza problemi ed in modo corretto, senza regole CSS perse per strada e/o rimpiazzate da altre:

body.<classe_default> {/* Stile di Default */ }
body.default h1 { border-bottom: 5px solid #999; color: #444; }
body.default a { color: #000; border-bottom: 2px solid #000; }
body.default a:hover { color: #333; border-color: #999; }

Definire gli stili alternativi

Dopo aver definito la classe di default, il prossimo passo è quello di scrivere il codice per la definizione degli altri stili, distinguendoli tramite la classe appropriata. Nel nostro esempio, la tonalità rossa è identificata dalla classe "rosso":

body.rosso h1 { border-bottom: 5px solid #F00; color: #900; }
body.rosso a { color: #900; border-bottom: 2px solid #F00; }
body.rosso a:hover { color: #F00; border-color: #900; }

Includere il foglio di stile

Ora disponiamo di un file CSS strutturato in maniera adeguata ed efficiente: grazie all'utilizzo delle classi, infatti, il Body Switcher può passare rapidamente da uno stile all'altro associando all'elemento <body> la classe corrispondente dello stile che si vuole visualizzare.

Siamo quindi pronti ad includere il nostro CSS nella pagina, all'interno della sezione <head>:

Configurare il Body Switcher

Quando abbiamo affrontato la fase di inclusione dei vari script, abbiamo detto che che sono necessari tre file JS differenti. Uno di questi è proprio iotbs2-key.js, che contiene tutti i parametri per la configurazione. Vediamo brevemente come modificarli.

switchManager

La prima dichiarazione che possiamo vedere all'interno del file consiste nella creazione di un'istanza dell'oggetto switchManager:

var switcher = new switchManager('body', '');

L'oggetto switchManager, di cui possiamo analizzare il codice nel file iotbs2-core.js, si occupa di leggere e scrivere i cookie per memorizzare le preferenze dell'utente, oltre che a gestire le funzioni principali dello script. Ha due parametri:

Elemento "Canvas": che nella maggior parte dei casi è <body>
Percorso per "Load Mode": serve per indicare la directory in cui sono contenuti i fogli di stile. Dato che noi utilizziamo la modalità "Standard Mode", dobbiamo lasciare il campo vuoto, altrimenti lo script interpreta l'implementazione come "Load Mode"

bodySwitcher

La seconda dichiarazione, invece, si occupa di generare i controlli dello switcher all'interno della nostra pagina, grazie ad un'istanza dell'oggetto bodySwitcher:

var screenSwitcher = new bodySwitcher('screen-switcher', 'Stili Disponibili:', 'no', '');

Il codice si può analizzare nel file JS relativo all'interfaccia, nel nostro caso è iotbs2-directors.js. Questo oggetto necessita di quattro parametri:

ID Div "contenitore", nella quale saranno generati i controlli
Etichetta: testo descrittivo posizionato sopra i controlli
Switching nativo: serve per segnalare l'utilizzo dello switching nativo. E' un parametro utile solo in caso di implementazione "Integrate Mode", quindi lasciamo come valore "no"
Testo di selezione: è il testo che viene aggiunto in caso di selezione dello stile, infatti l'indicatore della selezione nei radiobutton e nei menu "select" è una caratteristica nativa dei componenti, mentre nelle liste di definizione questa opzione non è presente

Metodo defineClass

Ora che abbiamo inserito i controlli per lo style switching, dobbiamo aggiungere i vari stili che l'utente può selezionare. L'operazione di aggiunta di uno stile avviene tramite il metodo defineClass, che ha due parametri:

Nome della classe, che permette di identificare lo stile
Etichetta dello stile: testo che descrive e/o identifica lo stile

In base a questi presupposti, l'aggiunta degli stili al nostro switcher avviene per mezzo di queste due linee di codice:

screenSwitcher.defineClass('default', 'Visualizza lo stile originale');
screenSwitcher.defineClass('rosso', 'Visualizza la tonalita rossa');

Con queste due righe, termina anche la fase di configurazione: il Body Switcher è finalmente implementato e questo è il risultato. Ora possiamo esaminare esempi più complessi e vicini alla nostra quotidianità.

Blog tematici

Il Body Switcher, o più in generale il classico Style Switcher, viene utilizzato oggi in qualsiasi tipologia di sito, ma ci sono siti particolari in cui questo mezzo può divenire davvero utile ed indispensabile. Questi siti sono i blog tematici.

I blog tematici, gestiti solitamente da società editoriali ben consolidate, in questi ultimi anni hanno riscosso molta attenzione da parte degli utenti web. Chi li gestisce spesso ne diversifica lo stile, utilizzando differenti tonalità cromatiche, per favorire una migliore navigabilità del sito ed una netta distinzione tra i vari siti, evitando quindi confusione da parte dell'utenza (un buon esempio è il network OneBlog).

Partendo da questo presupposto, mi è sembrato doveroso fornire un secondo esempio che rappresenta un possibile template di un blog tematico. Come potete vedere, esso ha due tonalità: una "giornalistica" con dominante grigia ed una tipicamente estiva, con colori che ricordano il mare e la sabbia della spiaggia.

Figura 3 - Cambio di tonalità nella pagina di esempio
Stili da implementare

In realtà questo esempio non è altro che un'ottima evoluzione del precedente, quindi lascio a voi l'analisi del file CSS, dato che non abbiamo nulla da aggiungere a ciò che abbiamo già detto.

Layout Switcher: 1,2,3...n colonne

Adesso è il turno del "Layout Switcher", che non si tratta di un nuovo script ma semplicemente di un utilizzo appropriato dei mezzi che ci offre il CSS come linguaggio.

Il cambio di tonalità, infatti, è solo una delle possibili applicazioni del Body Switcher. Grazie al totale controllo sugli elementi discendenti, oltre alla gestione del testo e/o dello sfondo, possiamo ottenere anche il controllo sul box model. In questo modo le possibilità offerte da questa tecnica sono teoricamente "illimitate", garantendo un elevato livello di personalizzazione. Per esempio, possiamo cambiare posizione o modificare la larghezza di un blocco. Oppure nascondere o mostrare dei div con contenuti opzional/marginali.

Ma lo sfruttamento più "sensato" di questa tecnica riguarda sicuramente il cambio della pagina da una a più colonne, come è stato fatto nel terzo ed ultimo esempio. Per una migliore comprensone dell'esempio, di seguito potete trovare la struttura base:

1 Colonna: div#content, corpo centrale in cui sono posizionate le news del sito
2 Colonne: div.sidebar, colonna laterale, in cui son contenute le notizie in rilievo, oltre a #content
3 Colonne: div.sidebar e div.sidebar comments, le due colonne laterali (oltre a #content) che contengono rispettivamente le notizie in rilievo e gli ultimi commenti alle news. La classe sidebar comments serve per acquisire lo stile della colonna sidebar e definire successivamente nuove regole stilistiche

In base a questo schema, per cambiare il numero di colonne è necessario nascondere/mostrare gli elementi della pagina, come ad esempio div.sidebar per passare da una a due colonne. Per ottenere ciò esistono due vie possibili: l'utilizzo della proprietà display: none, utilizzata anche nell'esempio, ed il cambio di markup.

Display: none

L'utilizzo della proprietà display: none, come si può intuire dal nome, permette di nascondere gli elementi marginali della pagina. Per applicarla basta selezionare gli elementi che si vuole "cancellare" ed applicare la regola CSS:

body.unacolonna .sidebar { display: none; }
body.unacolonna .comments { display: none; }

Queste due dichiarazioni CSS son state usate nell'esempio per nascondere le due colonne laterali ed ottenere così il layout ad una colonna. Per ripristinare il layout a due colonne, basta modificare il valore della proprietà display del div .sidebar:

body.duecolonne .sidebar { display: block; }

Questo metodo non è esente però da difetti: il problema principale è il caricamento di tutto il markup, anche quello non necessario: ovviamente il problema diventa rilevante quando si ha a che fare con veri e propri portali, in cui il codice HTML spesso occupa parecchi Kb.

Cambio di markup

Per utilizzare questa tecnica basta modificare il markup eliminando tutti gli elementi superflui e successivamente scrivere le regole CSS relative agli elementi rimasti. È un metodo efficiente perchè evita il caricamento di markup inutile, ma presenta un difetto non trascurabile: la modifica del codice è obbligatoria e non sempre è possibile farlo in run-time (in tempo reale). Il Body Switcher è uno dei tanti script che non lo permettono: ovviamente ciascuno lo può adattare alle proprie esigenze, se ha le conoscenze adeguate, implementando anche questa caratteristica.

Fortunatamente esistono anche alternative, come SixApart che, a partire dalla release 3.2 di Movable Type ha realizzato una nuova gestione dei templates in comune a tutti gli altri sistemi di blogging (TypePad e LiveJournal) sfruttando proprio il cambio di markup per trasformare il layout da una a tre colonne. Per saperne di più potete visitare la relativa documentazione su Movalog.

In conclusione: le due "tecniche" presentano dei difetti e dei pregi, tocca a voi scegliere di utilizzare una o l'altra, in base alle vostre esigenze e ai mezzi che avete a disposizione.

Conclusioni

Termina qui la panoramica sul Body Switcher. Gli esempi presentati in realtà sono una minima parte di ciò che si riesce effettivamente a fare: a farla da padrone è la creatività che in questi casi gioca un ruolo principale e molte volte offre soluzioni più funzionali.

Oltre tutto capire a fondo il funzionamento del Body Switcher vi sarà molto utile in caso vogliate sviluppare un vostro tema per Movable Type, famoso concorrente di WordPress nella gestione di blogs.

Ecco una serie di risorse relative al Body Switcher in lingua inglese per poter approfondire meglio l'argomento:

Vi lascio infine con il download degli esempi.

Indice lezioni