Blog

[JS] Cambiare CSS in un attimo

Ago 1

Oggi vediamo come cambiare il foglio di stile di una pagina con qualche riga di JavaScript. Una fuzione del genere può essere utile in tutti i casi in cui dobbiamo avere più versioni grafiche dello stesso sito, come ad esempio uno stile a più contrasto oppure uno stile dove cambiamo il colore dominante.

La pagina contenente più stili dovrà avere tutti i css dichiarati, ovviamente dando priorità al foglio di stile predefinito che il browser dovrà applicare al caricamento della pagina. Per far ciò basta impostare in modo specifico l'attributo rel del tag link usato per caricare i CSS.

Questo sarà il CSS predefinito:

<link rel="stylesheet" href="html/style.css" type="text/css" title="Stile Chiaro">

Mentre questo sarà il CSS alternativo:

<link rel="alternate stylesheet" href="html/style_dark.css" type="text/css" title="Stile Scuro">

A questo punto già con Firefox siamo in grado di cambiare lo stile della pagina tramite Visualizza �?? Stile pagina. Vediamo adesso come farlo da JavaScript.

Per accedere ai figli di stile basta un po' di conoscenza di DOM, infatti basta leggere e scrivere la proprietà styleSheets dell'oggetto document.

css = document.styleSheets;

Il contenuto della variabile css sarà un array con gli oggetti dei fogli di stile. L'elemento numero 0 sarà il primo CSS dichiarato, mentre l'elemento 1 sarà il secondo CSS. Agendo sulle proprietà enable e disabled dell'oggetto contenuto dell'array, sarà possibile attivare e disabilitare ogni stile permettendo di cambiare tra uno stile e l'altro.

Esempio

Una funzione applicativa potrebbe essere la seguente:

function styleChange(){

        var ss = document.styleSheets;



        if(ss[1].disabled){

                ss[1].disabled = false;

                ss[0].disabled = true;

        }

        else if(ss[0].disabled)

        {

                ss[1].disabled = true;

                ss[0].disabled = false;

        }

}

DIASPORA* Facebook

Usare la proprietà CSS3 text-shadow

Lug 10

Con il supporto sempre crescente dei browser alla specifica CSS3 possiamo iniziare a sfruttarne alcune caratteristiche gustose. Una di queste è l'ombra del testo.

La proprietà text-shadow agisce solo sul testo (come del resto suggerisce il nome) e permette di avere il controllo sulle seguenti proprietà dell'ombra:

  • Asse X dello scostamento del testo (anche negativo)
  • Asse Y dello scostamento dal testo (anche negativo)
  • Diffusione dell'ombra
  • Colore

La sintassi è la seguente:

text-shadow: scostamento-x scostamento-y diffusione colore;


Il tutto si traduce in un pratico esempio: un testo nero in grassetto con una ombra in basso a destra di colore grigio. Il testo a sinistra è frutto della proprietà CSS interpretata dal proprio browser mentre il testo a destra è l'immagine di riferimento.

text-shadow: 2px 2px 2px #aaa;

Testo con ombra



Questa proprietà CSS3 è supportata da tutti i browser aventi il motore Webkit di versione abbastanza recente (quindi Safari 2 e 3 e Chrome), Firefox 3.5, e Opera 9.5. Se usate uno sei suddetti browser dovreste aver notato qualche chicca al template del blog, i link della barra laterale destra, i link della barra di navigazione e i titoli dei post.

Seguono adesso molti esempi della proprietà text-shadow per gli usi più disparati.

Continua a leggere »

DIASPORA* Facebook

Pingdom Tools, quanto è veloce il tuo sito?

Ott 14

Grazie a Piplos sono venuto a conoscenza di questo web tool veramente utile, Pingdom Tools. Come tutti voi sapranno il fattore della velocità di caricamento di un sito, è determinante per evitare di perdere potenziali visitatori. Inoltre una buona ottimizzazione della pagina porta ad un maggiore pagerank.
Ebbene questo servizio web 2.0 sviluppato in AJAX, permette di analizzare con estremo dettaglio il tempo di caricamento del sito sotto esame.

Nel mio caso si ottiene:

Post image


Continua a leggere »

DIASPORA* Facebook
CC BY-NC-SA 3.0 2004-2012 Daniele Napolitano — Per informazioni sulla licenza leggere le Note legali
Torna su