Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Mondo Javascript

Pagine:

RSS

Javascript e CSS: binomio perfetto

di: Alessandro Fulciniti 22 Febbraio 2006

Aggiungere CSS esterni con Javascript

Nella maggior parte dei casi di soluzioni Javascript + CSS, si potrebbe adottare un approccio interamente basato su Javascript, grazie al DOM che permette di modificare direttamente la presentazione, aggiungendo proprietà e valori CSS agli elementi di pagina. Ma per quali motivi allora appoggiarsi ai CSS quando si potrebbe fare tutto con Javascript?

Principalmente i motivi sono tre: il primo è che è molto più semplice e leggero attribure nel Javascript una classe, da presentare con i CSS, che aggiungere proprietà e valori direttamente con il DOM. Il secondo motivo è che un simile approccio mantiene i compiti separati: a Javascript spetta gestire eventi e manipolare, creare elementi, mentre i CSS si occupano della presentazione delle pagine arricchite. Dai primi due punti ne consegue il terzo, ovvero un ulteriore grado di personalizzazione che spesso si rivela utilissimo.

Una buona pratica in soluzioni basate su CSS e Javascript è tenere il CSS funzionale e/o presentazionale della soluzione arricchita in un CSS esterno e separato rispetto a quello che riguarda layout e presentazione della pagina senza Javascript. Detto ciò, i modi di procedere sono sostanzialmente tre.

Il primo e più semplice è linkare nella sezione head sia il javascript sia il CSS:

Questa soluzione ha un piccolo svantaggio, ovvero far scaricare all'utente il CSS necessario anche se Javascript non può girare. Gli utenti che navigano con Javascript disabilitato o con browser non DOM-compatibili saranno una percentuale che oscilla tra il 5 e il 10%, ma servire un CSS di cui non potranno beneficiare uno spreco di byte sia per l'utente che per il server.

Il secondo e il terzo approccio linkano il CSS solo nel caso in cui Javascript sia abilitato. Ma come fare? Semplice, basta includere il CSS tramite il javascript stesso: ecco così la seconda soluzione. All'interno del javascript linkato nella sezione head basterà aggiungere la seguente riga:

document.write('<link rel="stylesheet" type="text/css" href="nifty.css">');

Un piccolo accorgimento da tenere in considerazione: ovvero la parità di singoli e doppi apici. Questa soluzione è altrettanto veloce e consente comunque il caching del CSS e si rivela molto efficace soprattutto se vogliamo applicare con effetto quasi immediato regole CSS subordinate alla presenza o meno di Javascript. Lo svantaggio principale è che una soluzione simile non funziona in documenti XML o con pagine XHTML servite con mime-type application/xhtml+xml.

Il terzo approccio supera quest'ultimo problema, ma si presenta un po' più prolisso. Cominciamo con il vedere il codice della funzione AddCSS, che riceve come unico parametro il nome del file CSS, eventualmente con il percorso, e crea un elemento link con gli attributi necessari:

function AddCss(url){
var l=document.createElement("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href",url);
document.getElementsByTagName("head")[0].appendChild(l);
}

La funzione AddCss, interamente basata sul DOM, non è purtroppo libera da svantaggi. Infatti requisito fondamentale è che questa venga invocata quando il caricamento della pagina è avvenuto, o almeno quando l'elemento head è disponibile nell'albero DOM. Tipicamente, verrà quindi chiamata all'interno del gestore di eventi window.onload: da ciò deriva la mancanza di rapidità di esecuzione che caratterizzava la precedente soluzione.

Conclusioni

Prima di concludere, una citazione en passant va alla collezione document.styleSheets che pur facendo parte delle specifiche DOM di livello 2 del W3C non gode purtroppo di un buon supporto cross-browser. Potenzialmente sarebbe utilissima: consente infatti di consultare, accedere in lettura e scrittura e aggiungere proprietà e valori CSS mediante Javascript, ma come documentato minuziosamente da Peter-Paul Koch il supporto del DOM di livello 2 si rivela piuttosto variabile da browser a browser.

Abbiamo visto in questo articolo come Javascript disponga di metodi consolidati per interagire con i fogli di stile, accedendo in lettura o in scrittura a singole proprietà, aggiungendo classi e addirittura interi fogli di stile. Una cosa da tener ben presente lavorando con Javascript e CSS assieme è la separazione dei ruoli: di norma, non bisogna far fare a Javascript ciò che è compito esclusivo dei CSS, ovvero la presentazione di default. In quanto alla presentazione "arrichita" andrà valutato di caso in caso se lavorare esclusivamente con Javascript porta dei vantaggi in termini di peso e velocità oppure se sacrifica gradi di libertà della sua personalizzazione: in tal caso appoggiarsi a un CSS esterno si rivela il più delle volte la scelta migliore. Alla prossima.