due chiacchiere

Il tuo sito cambia stile?

La pubblicazione a puntate di articoli tecnici, lo ammetto, è un espediente per fidelizzare un po’ gli utenti di questo sito. In fondo, aver seguito il corso di Tecniche della Comunicazione, mi sarà pur servito a qualcosa. Ma è anche un modo per non “sovraccaricarti” di informazioni tutte in un colpo solo, e darti il tempo di digerire con calma quello che ti racconto. In questo intervento, riprendo il discorso su come dare ai tuoi visitatori la possibilità di cambiare “al volo” lo stile della pagina che stanno guardando.

Abbiamo visto che esistono tre tipologie di fogli di stile. Quando un documento viene caricato dal browser, gli stili persistenti e quello preferenziale vengono applicati automaticamente, mentre quello alternativo potrà essere selezionato dall’utente. Il Consorzio per gli standard del Web W3C dice che il browser dovrebbe avere un menù a tendina o qualcosa di analogo, per poterci far scegliere lo stile desiderato. Peccato che alcune versioni di Internet Explorer non abbiano nulla del genere. Allora ci viene in aiuto il buon vecchio Javascript.

Qualche riga di codice

La prima cosa che impareremo è di far riconoscere a Javascript i vari stili che abbiamo dichiarato. A quel punto basterà dirgli una cosa del tipo “quando l’utente clicca su questo pulsante, usa il secondo foglio di stile anziché il primo”. Ma andiamo con ordine. Un primo pezzo di codice cercherà tra le intestazioni tutte le definizioni di stile; per far questo ci si chiede: “questo elemento link con attributo rel è di tipo stile?

HTMLLinkElement.getAttribute("rel").indexOf("style") != -1

Per caso ha un titolo definito? (stile preferenziale):

HTMLListElement.getAttribute("title")

Oppure è alternativo?

HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

Notiamo che il controllo è fatto sulla stringa “alt” e non “alternate” , perché in alcuni browser viene usata la stringa “alternative” invece di quella standard. Usando questi tre controlli, possiamo quindi ottenere una funzione che, dato il titolo di uno stile, lo cerca ed eventualmente lo “attiva” al posto di quello corrente. Ciò sarà fatto tramite un ciclo che scandisce tutti gli elementi di tipo link dichiarati nella pagina, disattivando quelli predefiniti e il preferenziale, ed attivando (se esiste) quello indicato [vedi funzione].

La funzione all’opera

A questo punto non rimane che utilizzare la funzione all’interno della pagina. Per far questo, predisponiamo un collegamento che richiami il cambio di stile. Supponiamo quindi di aver costruito due fogli di stile, stile1.css e stile2.css, e di averli inseriti come predefinito e alternativo rispettivamente. Il secondo ha come titolo “stile2” per semplicità. Allora inseriamo questo codice:

onclick="setActiveStyleSheet('stile2'); return(false)" href="https://duechiacchiere.it/#" >prova

Si tratta di un esempio molto semplice, che può essere arricchito a piacimento. Il dettaglio da notare è la definizione dell’evento onclick, che serve appunto per richiamare la funzione appena definita. Essa può essere inserita nel codice HTML della pagina attraverso il tag SCRIPT:

(to be continued)

Lascia un commento

Torna in cima alla pagina