TomStardust.com

Qualche tempo fa la Apple ha presentato al CSS Working Group del W3C una proposta riguardante transizioni ed animazioni con i CSS.  Il tutto è stato preso in considerazione ed inserito nel documento che mostra i progressi del gruppo.

Ma di cosa stiamo parlando? Sono novità interessanti e prioritarie o l’introduzione di queste proposte potrebbe aumentare la confusione?

Le novità

Trasformazioni CSS

Pur non essendo incluse nell’ultima proposta, le trasformazioni CSS sono comunque correlate. La proprietà transform consente infatti di spostare, ruotare o ridimensionare un elemento della pagina.

Transizioni CSS

Questo modulo gestisce le transizioni tra pseudo-classi, come potrebbe essere il passaggio allo stato :hover di un link e viceversa. Per la transizione è possibile specificare un determinato periodo di tempo (transition-duration), il passaggio non sarà quindi istantaneo. Ad esempio un link potrebbe cambiare colore sfumando.

Animazioni CSS

Se già con il modulo dedicato alle transizioni è possibile associare ad un oggetto dei brevi movimenti, con questo modulo si possono raggiungere risultati ancora più complessi.

Definendo gli eventi associati ad una determinata animazione, è possibile infatti indicare quali siano le proprietà che cambiano, il loro valore, e per quanto tempo.

Esempi pratici

Mi rendo conto che con queste novità sia facile fare confusione. Per chiarirsi le idee basta avere installato Safari: il browser Apple infatti supporta queste funzioni con dei comandi proprietari (con il prefisso -webkit-).

Per trasformazioni e transizioni questo è uno dei migliori esempi disponibili. Se invece volete vedere un’animazione CSS, la trovate in questa pagina, ma vi servirà una delle ultime nightly build di Safari (anche Safari 4 beta).

Possibili problemi

Siamo sicuri che queste novità siano positive per gli sviluppatori? Fino ad ora la parte interattiva di una pagina era gestibile con JavaScript (lasciamo da parte Flash): introdurre dei nuovi meccanismi di controllo direttamente nei CSS potrebbe generare diversi problemi.

Compatibilità tra i browsers

Inutile dirlo, se già adesso ci sono problemi ad ottenere risultati equivalenti sui vari browser, occupandosi esclusivamente dell’aspetto visivo delle pagine, cosa succederà quando il discorso riguarderà anche l’interazione tra vari elementi? Queste proprietà saranno di fatto inutilizzabili, a meno che non si voglia ricorrere a JavaScript per ottenere risultati simili sui browser che non le supportano. Ma allora perchè non usare direttamente JavaScript?

Interazione con JavaScript

Separando l’aspetto dell’interazione tra CSS e Javascript, si presenta un altro problema: l’interazione tra i due mondi. Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.

Accessibilità

I problemi non mancano nemmeno per quanto riguarda l’accessibilità. Già adesso per uno screen reader non è facile sapere tutto ciò che succede in una pagina, soprattutto se certi script AJAX vengono realizzati senza seguire le specifiche. Introdurre altre complicazioni aumenterà inevitabilmente le difficoltà per alcune categorie di utenti.

Conclusioni

Le possibilità offerte da trasformazioni, transizioni e animazioni CSS potrebbero essere interessanti, ma sarà bene valutarne pro e contro quando sarà il momento di utilizzarle. Il fatto che esista una determinata tecnologia, non significa che debba essere per forza utilizzata.

La tentazione potrebbe essere forte, perchè con poche righe di CSS sarà possibile animare facilmente gli elementi della pagina, ma la cosa migliore sarà continuare a gestire le interazioni esclusivamente con JavaScript, così come HTML e CSS sono riservati rispettivamente a contenuto e presentazione.

Usi Twitter?

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!