Come utilizzare le variabili CSS per l'animazione

() translation by (you can also view the original English article)

Quando menzioniamo CSS nelle discussioni ne parliamo spesso come di un linguaggio stupido. Un linguaggio dichiarativo, mancante di logica e intuizione; ma ciò non corrisponde alla realtà. Per anni gli sviluppatori hanno desiderato variabili CSS standard, viziati da pre-processori come LESS e Sass per così tanto tempo. Non solo le variabili CSS sono un'opzione reale e tangibile per gli sviluppatori, ma possono anche essere utilizzate in scenari di animazione. Ancora scettici? Proseguite per saperne di più!

Nozioni di base sulle variabili

Le variabili CSS sono valori memorizzati destinati ad essere riutilizzati all'interno di un foglio di stile. Sono accessibili utilizzando la funzione personalizzata var() e impostando la notazione di proprietà personalizzata.

:root {
  --main-color: goldenrod;
}

div {
  background-color: var(--main-color);
}

Le variabili definite all'interno di :root sono globali, mentre le variabili definite all'interno di un selettore sono specifiche per quel selettore.

1	div {
2	--module-color: goldenrod;
3	background-color: var(--module-color);
4	}

Nell'esempio precedente qualsiasi div accetterà la variabile, ma potremmo essere più specifici con la denominazione utilizzando metodi di targeting come per esempio class e id.

La funzione var() accetta anche valori fallback.

1	.nav {
2	background: var(--navbg, blue);
3	}

Ciò può essere utile in situazioni in cui una variabile non è ancora definita o quando si lavora con elementi personalizzati e lo Shadow DOM.

Le variabili CSS non sono ancora pronte, ma le prospettive per il futuro sono luminose con molti browser leader che già stanno implementando le specifiche. È solo una questione di tempo prima che vengano utilizzate senza preoccupazioni, e quel momento si sta avvicinando velocemente.

Variabili per l'animazione

Ci sono molte opzioni per la combinazione di variabili CSS con animazione. Pensate a contesti quali le visualizzazioni audio, gli scenari basati su eventi JavaScript e persino CSS quali hover, focus e target. In teoria, un Apple Watch potrebbe essere collegato a un'API mentre si utilizza un'animazione basata su variabile CSS di un cuore che batte. Poi abbiamo accelerometri, API ad inclinazione dispositivo e API gamepad, ma perché dovremmo considerare l'animazione con variabili CSS per tutto? Ecco alcuni motivi:

Facilmente debuggabile.
Manipolazione del DOM non eccessiva.
Indipendente dal nodo DOM.
Tematizzazione
Opera con SVG.

Le operazioni in CSS sono davvero la parte fondamentale dell'intero puzzle con le animazioni. Le funzioni CSS come calc possono accettare un valore a runtime ed eseguire operatori come moltiplicazione, divisione, addizione, sottrazione, mutando i valori in nuovi. Questo aiuta a rendere le variabili CSS dinamiche.

Variabili CSS in JavaScript

Ora che conosciamo l'aspetto delle variabili CSS e ciò che possono fare, è il momento di capire come JavaScript si inserisce in tutto questo.

1	document.documentElement.style.getPropertyValue('--bgcolor');
2	document.documentElement.style.setProperty('--bgcolor', 'red');
3	document.documentElement.style.removeProperty('--bgcolor');

Per impostare, ottenere e rimuovere i valori delle proprietà vengono utilizzati i metodi illustrati sopra. Sono utilizzabili per le nostre tipiche proprietà CSS (background-color, font-size etc), ma possono anche essere utilizzati per le variabili CSS. Queste opzioni imposteranno un nuovo valore per la proprietà definita globalmente altrimenti nota come :root in CSS.

Sono anche il vero segreto per l'animazione con le variabili CSS perché i nostri metodi JS possono ottenere, impostare o rimuovere una variabile a run-time in modo dinamico!

var element = document.querySelector('div');

element.style.getPropertyValue('--bgcolor');
element.style.setProperty('--bgcolor', 'red');
element.style.removeProperty('--bgcolor');

È anche possibile impostare un nuovo valore per un elemento specifico, se lo si desidera. Nello snippet d'esempio soprastante stiamo manipolando una variabile che è associata a un selettore div selezionato globalmente.

Demos In the Wild

Ci sono un sacco di sviluppatori impressionanti e di grande talento che costruiscono e sperimentano questi concetti di animazioni reattive e tematiche utilizzando variabili CSS. Di seguito riportiamo solo alcuni pens da controllare e scoprire.

Sunset/Sunrise

By David Khourshid.

Questo esempio mostra la potenza delle animazioni con variabile CSS utilizzate in modo tematico. In genere occorrerebbe il doppio del codice per eseguire questa demo senza variabili CSS e molto di più se desiderate superare i due temi.

CSS Variables Animation

By GRAY GHOST.

Ecco un altro esempio utilizzando eventi del mouse in JavaScript che guidano la posizione di un cerchio.

Ogni volta che muovete il mouse JavaScript aggiorna le nostre variabili dichiarate, permettendo al cerchio di spostare la posizione in relazione al cursore.

Alex the CSS Husky

By David Khourshid.

Qui è lo stesso principio illustrato sopra, ma utilizzato in un altro contesto.

Notate cosa succede quando si sposta il mouse? Abbastanza cool eh?

Animation with CSS Variables

By Wes Bos.

Che ne dite di aggiornare i valori delle variabili in altri modi? Diamo un'occhiata alla demo seguente di Wes Bos utilizzando cursori per aggiornare le posizioni di un'immagine.

Spostate i cursori a vostro piacimento. Vedete quanto è cool? Semplice, ma semplicemente magico è il fatto che sta aggiornando le variabili per la posizione di trasformazione ogni volta che i cursori vengono regolati. Suuuuhhhweeet!

Single Div Accordion (Animated with CSS Variables)

By Dan Wilson.

Che ne dite di qualcosa di leggermente diverso per i musicisti là fuori? Guardate questa fisarmonica di Dan Wilson.

Ehi! Guardate come si muovono quei tasti! Potrebbe sembrare un po' difficile da affrontare, ma il nucleo è solo JavaScript che aggiorna le variabili CSS. Niente di più, niente di meno.

CSS Variables + Transform = Individual Properties (with Inputs)

By Dan Wilson.

In questa demo, potete utilizzare gli intervalli di input per modificare ogni proprietà transform e verificare la fluidità anche modificando una proprietà a metà transizione.

Effetti collaterali delle variabili CSS

Dal momento che le variabili CSS sono sempre proprietà ereditabili, possono causare un ricalcolo di stile dei discendenti, impattando in modo negativo sulla performance del processo. Si tratta di qualcosa che bisogna misurare, al contrario di indovinare a seconda del contesto.

Eh, sembra che modificare variabili CSS su un elemento attivi un ricalcolo di stile per tutti i suoi discendenti. Ouch. pic.twitter.com/jvpDT5UB2h
— Joni Korpi (@jonikorpi) May 18, 2017

Ecco una demo che Shaw ha pubblicato sul gruppo Slack Animation at Work che è stato utilizzato per testare: CSS Variables Recalc Style Performance Test

Durante i tests (Chrome 58. Mac 10.12) si è scoperto che quando viene attivato il pulsante Set CSS Var dal momento in cui il browser dipinge lo sfondo ci sono 52.84ms di tempo di ricalcolo e 51.8ms di rendering. Cambiando i valori al test di proprietà CSS osserviamo un risultato molto diverso. Dal momento in cui viene attivato il pulsante Set CSS Property fino a che non si mostra il background trascorrono circa 0.43ms di ricalcolo e 0.9ms di rendering.

Se interrompete background per color avrete misure equivalenti poiché currentColor potrebbe o potrebbe non esistere nei discendenti (prendetevela con David Khourshid). Qualsiasi proprietà ereditata causerà sempre un ricalcolo di stile per tutti i discendenti. La proprietà background-color non è ereditabile, da qui l'enorme differenza con le variabili CSS che sono sempre ereditabili. Proprietà CSS che per impostazione predefinita hanno inherit causeranno nella maggior parte dei casi un ricalcolo di stile. È comunque importante notare che cambiare continuamente variabili CSS può danneggiare le prestazioni. Una buona pratica per evitare ciò consiste nell'animare le variabili CSS al livello più specifico (o livello più profondo), al fine di evitare una moltitudine di discendenti afflitti. Potete leggere ulteriori informazioni sulla riduzione della portata e complessità dei calcoli di stile tramite la pagina Google's Web Fundamentals.

Conclusione

Vi incoraggiamo ad approfondire la conoscenza di queste demo e provarle per voi stessi e per trarre le vostre conclusioni/modifiche/tests condividendo i risultati nei commenti. L'apporto principale in tutto questo consiste nel fatto che le variabili CSS offrono enorme flessibilità, ma ci saranno implicazioni sulle prestazioni per aver impostato variabili CSS su un elemento genitore con una grande quantità di discendenti.

Un ringraziamento speciale va al gruppo del canale Slack Animations At Work per i continui test, feedback e discussioni (David Khourshid, Joni Korpi, Dan Wilson e Shaw).

Risorse

CSS Custom Properties for Cascading Variables Module Level 1 su W3C
Making Custom Properties (CSS Variables) More Dynamic su CSS Tricks
Individualizing CSS Properties with CSS Variables di Dan Wilson
Reactive Animations CSS Variables slides di David Khourshid
Reactive Animations with CSS Variables - JSConf Iceland 2016 David Khourshid
Get variable from inline style di Lea Verou