CSS  »  Articoli  »  CSS 3 

Aggiungere un foglio di stile CSS3 con JavaScript

Potrà sembrare all'apparenza una soluzione poco ortodossa, ma in effetti l'aggiunta di fogli di stile che fanno uso di CSS3 o proprietà non standard mediante Javascript risulta a parer mio la soluzione più pratica.

Ciò consente infatti di mantenere il foglio di stile principale intatto e senza la necessità di modifiche, oltre a permetterne la validazione. Unico difetto è la dipendenza da Javascript: se risulta disabilitato sul browser dell'utente non è possibile caricare il CSS aggiuntivo. C'è da evidenziare che comunque una percentuale che oscilla tra il 95 e il 99% degli utenti ha Javascript abilitato. Inoltre, quello che andremo ad aggiungere attraverso Javascript è un CSS che per logica dovrebbe presentare caratteristiche di presentazione non essenziali, e più che altro decorative per i browser che potrebbero beneficiarne.

Siamo così pronti a presentare un esempio: si tratta di un semplice div che se visto con Firefox o Safari (versione 3 o con una versione recente di Webkit), dovrebbe avere gli angoli arrotondati. Torneremo sull'implementazione del CSS in seguito: quello su cui vorrei concentrare l'attenzione adesso è l'uso di Javascript per la parte CSS3 della pagina.

Se guardate il codice nella sezione head della pagina di esempio, noterete che ci sono due elementi script:

La prima riga serve per includere il piccolo script esterno, che pesa meno di mezzo Kbyte. Non sono necessarie conoscenze di Javascript per poterlo usare, ma per i curiosi e chi è un po' pratico di Javascript ho preparato la pagina con il suo codice da consultare. Tornando alle due righe viste sopra per incorporare lo script: salvo necessità di ridefinire il percorso del file, la prima riga per incorporare necessita di modifiche.

Attraverso il secondo blocco script verrà specificato invece il nome del file CSS da aggiungere alla pagina. All'interno del blocco script in questo caso, come si può notare, c'è un'istuzione ovvero AddCSS('border.css'). Tra i singoli apici basterà indicare il nome del file CSS da incorporare nella pagina, eventualmente con il percorso, e lo script si preoccuperà del resto. Da evidenziare che è possibile mediante lo script aggiungere diversi file CSS, e che lo script non dovrebbe dare conflitti con altri eventuali script della pagina.

A questo punto non ci resta che procedere ad introdurre le caratteristiche dei CSS3 in pratica: nel prossimo appuntamento partiremo dai selettori. Alla prossima!

Altri articoli

Altre guide

Altre newsletter