Share
Quando parliamo di CSS nelle discussioni, ne parliamo spesso come un linguaggio stupido. Un linguaggio dichiarativo, privo di logica e intuizione; ma questa non è la vera realtà. Per anni gli sviluppatori hanno bramato variabili in CSS standard, essendo stati rovinati da pre-processori come LESS e Sass per così tanto tempo. Le variabili CSS non sono solo un'opzione reale e tangibile per gli sviluppatori, ma possono anche essere utilizzate in scenari di animazione. Ancora scettico? Seguire per saperne di più!
Le variabili CSS sono valori memorizzati destinati al riutilizzo in un foglio di stile. Sono accessibili usando l'abitudine var () funzione e impostare utilizzando la notazione di proprietà personalizzata.
: root --main-color: goldenrod; div background-color: var (- main-color);
Variabili definite all'interno :radice sono globali, mentre le variabili definite all'interno di un selettore sono specifiche per quel selettore.
div --module-color: goldenrod; background-color: var (- module-color);
Nell'esempio sopra qualsiasi div accetterà la variabile, ma potremmo ottenere informazioni più specifiche sulla denominazione utilizzando metodi di targeting come classe e id per esempio.
Il var () la funzione può anche accettare valori di fallback.
.nav background: var (- navbg, blue);
Questo può essere utile in situazioni in cui una variabile non è ancora definita o quando si lavora con elementi personalizzati e Shadow DOM.
Le variabili CSS non sono ancora pronte per il prime time, ma le prospettive per il futuro sono molto brillanti con molti dei principali browser che già implementano le specifiche. È solo una questione di tempo prima che possano essere usati senza preoccupazioni, e quel tempo si sta avvicinando velocemente.
Ci sono molte opzioni per combinare le variabili CSS con l'animazione. Pensa a contesti come visualizzazioni audio, scenari basati su eventi JavaScript e persino eventi guidati da CSS come librarsi, messa a fuoco e bersaglio. In teoria, un Apple Watch potrebbe essere collegato a un'API mentre si utilizza un'animazione basata su variabili CSS di un cuore pulsante. Quindi abbiamo accelerometri, API di inclinazione del dispositivo e persino gamepad API, ma perché dovremmo prendere in considerazione l'idea di animare con le variabili CSS? Ecco alcuni motivi:
Le operazioni in CSS sono davvero la parte chiave dell'intero puzzle con animazioni. Funzioni CSS come calc può accettare un valore in fase di esecuzione ed eseguire operatori come moltiplicazione, divisione, addizione, sottrazione, valori mutanti in valori nuovi. Questo aiuta a rendere dinamiche le variabili CSS.
Ora che sappiamo come sono le variabili CSS e cosa possono fare è tempo di capire come si inserisce JavaScript in tutto questo.
Accentsconagua
document.documentElement.style.getPropertyValue ( '- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'red'); document.documentElement.style.removeProperty ( '- bgcolor');I metodi mostrati sopra sono usati per impostare, ottenere e rimuovere valori di proprietà. Possono essere utilizzati per le nostre tipiche proprietà CSS (colore di sfondo, dimensione del font ecc.), ma possono essere utilizzati anche per le variabili CSS. Queste opzioni imposteranno un nuovo valore per la proprietà globalmente definita altrimenti conosciuta come :radice 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 in fase di esecuzione 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 di esempio sopra stiamo manipolando una variabile che è associata a a div selettore contro essere collegato globalmente.
Ci sono molti sviluppatori fantastici ed estremamente talentuosi che costruiscono e sperimentano questi concetti di animazioni reattive e basate su temi usando le variabili CSS. Qui ci sono solo alcune penne per immergersi e scoprire cosa sta succedendo sotto il cofano.
Di David Khourshid.
Questo esempio mostra la potenza delle animazioni variabili CSS utilizzate in un modo basato su temi. In genere sarebbe il doppio del codice per eseguire questa demo senza variabili CSS e molte volte di più se si desiderava superare due temi.
Di GRAY GHOST.
Ecco un altro esempio che utilizza gli eventi del mouse in JavaScript che guidano la posizione di una cerchia.
Ogni volta che muovi il mouse, il JavaScript aggiorna le nostre variabili dichiarate, consentendo al cerchio di muoversi in relazione al tuo cursore.
Di David Khourshid.
Ecco lo stesso principio dimostrato sopra, ma utilizzato in un altro contesto.
Nota cosa succede quando muovi il mouse? Molto carino eh?
Di Wes Bos.
Che ne dici di aggiornare i valori delle variabili in altri modi? Diamo un'occhiata alla demo seguente di Wes Bos usando i cursori per aggiornare le posizioni di un'immagine.
Sposta i cursori in giro a tuo piacimento. Notare la freddezza che ne deriva? Semplice, ma semplicemente magico e tutto ciò che sta facendo è aggiornare le variabili per la posizione di trasformazione ogni volta che i cursori vengono regolati. Suuuuhhhweeet!
Di Dan Wilson.
Che ne dici di qualcosa di un po 'diverso per i musicisti là fuori? Dai un'occhiata a questa fisarmonica alla moda di Dan Wilson.
Whoa! Guarda quelle chiavi muoversi! Questo potrebbe sembrare un po 'intimidatorio, ma al centro è solo JavaScript che aggiorna le variabili CSS. Niente di più, niente di meno.
Di Dan Wilson.
In questa demo, utilizzare gli intervalli di input per modificare ciascuna proprietà di trasformazione e verificare la loro uniformità anche se si modifica una transizione a metà della proprietà.
Poiché le variabili CSS sono sempre proprietà ereditabili, possono causare un ricalcolo di stile dei bambini, con effetti negativi sulle prestazioni nel processo. Questo sarà qualcosa che devi misurare, invece di indovinare a seconda del tuo contesto.
Sembra che modificare le variabili CSS su un elemento inneschi un ricalcolo di stile per tutti i suoi figli. Ahia. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi), 18 maggio 2017
Ecco una demo Shaw pubblicata sul gruppo Animation at Work Slack che è stato utilizzato per il test: Test delle prestazioni di stile delle variabili CSS Recalc
Durante i test (Chrome 58. Mac 10.12) è stato scoperto che quando il Imposta Var CSS il pulsante viene attivato fino a quando il browser non dipinge lo sfondo, ci sono 52,84 ms di tempo di ricalcolo e il rendering di 51,8ms. Cambiando marcia al test della proprietà CSS viene scoperto un risultato molto diverso. Dal momento in cui il Imposta la proprietà CSS il pulsante viene attivato fino a quando lo sfondo non dipinge ci sono circa 0,43 ms di ricalcolo e rendering di 0,9 ms.
Se cambi sfondo fuori per colore da allora otterrai misurazioni equivalenti currentColor potrebbe o potrebbe non esistere nei bambini (gridare a David Khourshid). Qualsiasi proprietà che sia ereditabile causerà sempre un ricalcolo di stile per qualsiasi e tutti i bambini. La proprietà colore di sfondo non è ereditabile, quindi la tremenda differenza con le variabili CSS che sono sempre ereditabile. Tipicamente le proprietà CSS predefinite ereditare nella maggior parte dei casi causerà un grande ricalcolo di stili. È comunque importante notare che la modifica continua delle variabili CSS può essere una perdita di prestazioni. Una buona pratica per evitare questo è di animare le variabili CSS al livello più specifico (o livello più profondo), al fine di prevenire una moltitudine di bambini colpiti. Puoi leggere ulteriori informazioni sulla riduzione dell'ambito e della complessità dei calcoli di stile tramite la pagina Concetti base web di Google.
Vi incoraggio tutti a immergervi e testare questa demo per voi stessi e apportare le vostre conclusioni / modifiche / test personalizzati e condividere i risultati nei commenti. Il principale punto d'appoggio di tutto questo è che le variabili CSS offrono un'enorme flessibilità, ma ci saranno implicazioni sulle prestazioni per l'impostazione di variabili CSS su un genitore con una grande quantità di bambini.
Un ringraziamento speciale alla gang del canale Animations At Work Slack per i test, i feedback e le discussioni in corso (David Khourshid, Joni Korpi, Dan Wilson e Shaw).
