Mentre si lavora su un foglio di stile capita sicuramente di dover ricaricare centinaia e centinaia di volta la stessa pagina web per visualizzare le modifiche effettuate. Anche il semplice spostamento di un elemento di qualche pixel richiede di aggiornare la pagina per essere visualizzato.
La libreria Javascript che vi presento, ci consente invece, di visualizzare in tempo reale le modifiche effettuate ai fogli di stile senza dover aggiornare continuamente la pagina.
Livecss
La libreria in questione si chiama livecss ed è stata sviluppata da Phil Crosby. Le sue dimensioni sono davvero ridotte, solo 7kb in versione decompressa, ma la sua utilità è incommensurabile.
Utilizzarla è semplicissimo; è sufficiente importare il file Javascript all’interno della pagina e richiamare il metodo watchAll() come nel seguente codice:
1
livecss.watchAll();
Il metodo appena visto effettua una continua verifica su tutti i tag <link rel="stylesheet" type="text/css" media="screen" href="" /> e, nel caso in cui il loro contenuto cambiasse, li ricarica automaticamente.
Nel caso in cui si lavora su uno solo dei file css importati nella pagina e vogliamo evitare di effettuare il controllo su tutti gli altri (e quindi risparmiare risorse), possiamo utilizzare il metodo watch() passandogli come parametro il tag link che vogliamo verificare.
Per interrompere l’esecuzione dello script è possibile richiamare, ad esemprio attraverso la console di Firebug, il metodo unwatchAll() o unwatch(link da non verificare).
Demo
Siccome non è possibile allegare una demo live del funzionamento, ho realizzato un piccolo screencast per farvi vedere in opera l’utilissimo script.
Download
E’ possibile leggere la documentazione e scaricare il plugin al seguente link:
Pacman
Nostradamus
Magical Cat Adventure
Snake