Ormai vogliamo che tutti i siti siano “wow”: sviluppatori, clienti, agenzie… I siti statici non ci piacciono più e, per far dire “wow” ci servono animazioni più o meno sofisticate.
La domanda che ci poniamo noi sviluppatori è: quale tecnologia possiamo usare per ottenere i migliori effetti? JavaScript o CSS3? La risposta è: dipende. Proviamo a capire insieme perché.
STORIA
Purtroppo adesso ci tocca la parte noiosa della storia, ma almeno un accenno è d’obbligo.
I CSS (Cascading Style Sheets) nascono per definire la formattazione di una pagina web separandola dal contenuto. L’insieme delle direttive che li descrivono sono state emanate nel 1996 dal W3C.
Per dare lo stile a una pagina web, prima dei CSS, Internet Explorer e Netscape (gli unici 2 browser che si contendevano lo scettro nel 1993) definivano tag proprietari. Senza dilungarci troppo sugli aspetti negativi di questo approccio, possiamo dire velocemente che non permetteva una facile lettura del codice oltre ad obbligare gli sviluppatori a scrivere un codice diverso a seconda del browser utilizzato.
Sì, va bene, tutto molto bello, ma le animazioni? Per utilizzare le animazioni in CSS si dovranno aspettare il 2014 e l’avvento del CSS3. In ogni caso, ad oggi, non c’è ancora una piena compatibilità con i vari browser in circolazione.
Passando a JavaScript, possiamo dire che viene usato come linguaggio frontend e, per quanto riguarda le animazioni, tra i suoi precursori si possono senza dubbio annoverare le librerie come moo.fx e script.aculo.us. Grazie alla loro introduzione, diventerà molto semplice aggiungere dinamicità alle pagine web senza dover ricorrere a plugin ormai antiquati e poco sicuri come Flash.
CREARE ANIMAZIONI
Per molti versi, i moduli CSS3 dedicati alle animazioni svolgono le stesse operazioni di una libreria JavaScript, ma in modo nativo. Questo comporta notevoli vantaggi:
- un minor dispendio di memoria rispetto ad altre soluzioni,
- un minor peso delle pagine web, visto che non vengono incluse le librerie JavaScript specializzate in effetti. Questo è un aspetto molto importante nei casi in cui l’uso della banda è fondamentale come nei sistemi mobile.
Ovviamente non è tutto oro quello che luccica. Infatti, se si è abituati a JavaScript, per poter iniziare a creare animazioni in CSS bisogna cambiare il proprio modo di programmare. Un altro svantaggio, che in alcuni casi potrebbe essere limitante, è che le versioni meno recenti di IE non supportano le animazioni in CSS. Una possibile soluzione potrebbe essere quella di scrivere le animazioni fondamentali per il sito (che sono realmente molto poche) in JavaScript e quelle superflue in CSS. Un’altra soluzione potrebbe essere quella di creare una pagina ad hoc che invita l’utente a scaricare una versione più recente del browser.
Velocità e fluidità rimangono comunque dei punti fermi: mai trascurarle in fase di sviluppo!
Se fino a qualche tempo fa le animazioni CSS vincevano a mani basse, ora utilizzando librerie JavaScript create ad hoc si possono ottenere prestazioni simili e in alcuni casi anche superiori. Pensiamo ad una situazione in cui si sviluppano diverse animazioni contemporaneamente o le trasformazioni, ad esempio… Una libreria sicuramente degna di nota è GSAP che promette prestazioni fino a 20 volte migliori rispetto a JQuery (qui un confronto tra alcune librerie di animazioni JavaScript, ma ne esistono molte altre).
MOBILE
E come la mettiamo con tutto quel traffico che arriva da mobile? Anche l’occhio vuole la sua parte e l’esigenza è quella di avere, su mobile, degli effetti simili a quelli dei siti desktop. CSS o JavaScript? Come anticipato precedentemente, uno dei vantaggi delle animazioni in CSS è soprattutto l’impatto minore in termini di performance. Il JavaScript, invece, inciderebbero notevolmente su CPU poco potenti e quantitativi di RAM ridotti. Inoltre, le versioni mobile dei vari browser per iPhone e Android diventano sempre più compatibili con le animazioni CSS, garantendo fluidità e reattività paragonabili a quelle di un’applicazione nativa. Tuttavia, in alcuni casi, si è costretti a usare le librerie JavaScript soprattutto in casi di animazioni concorrenti o non supportate.
SUPPORTO DEI BROWSER
Uno dei maggiori problemi legati all’utilizzo delle animazioni in CSS è il supporto da parte dei vari browser (soprattutto i meno recenti) e l’utilizzo dei vari prefissi. Per ovviare al problema esistono diverse tecniche: utilizzare librerie esterne per verificare se le animazioni sono supportate (una su tutte Modernizr) oppure usare commenti condizionali (per esempio per le versioni meno recenti di IE).
CONCLUSIONI
Se pensavate di leggere questo articolo per riuscire a scoprire la tecnica migliore da usare per le vostre animazioni avete sbagliato di grosso. Non esiste un approccio giusto o sbagliato. Come detto all’inizio dell’articolo, dipende da cosa dovete fare. Se non volete usare librerie esterne la vostra scelta cadrà su CSS3, se volete fare animazioni complesse probabilmente per non diventare pazzi andrete su JavaScript così come se dovete avere piena compatibilità con vecchi browser.
Alla fine, probabilmente senza accorgervene, userete entrambi gli approcci nei vostri progetti a seconda delle necessità.
Peace!
Andrea
