Share
Når vi nevner CSS i diskusjoner, snakker vi ofte om det som et dumbed down språk. Et deklarativt språk, mangler logikk og innsikt; men det er ikke den sanne virkeligheten. I årevis har utviklere vært etterspørselsvariabler i standard CSS, etter å ha blitt bortskjemt av forprosessorer som LESS og Sass for så lenge. Ikke bare er CSS-variabler et reelt og materielt alternativ for utviklere, de kan også brukes i animasjonsscenarier. Fortsatt skeptisk? Følg med for å finne ut mer!
CSS-variabler er lagrede verdier som er beregnet for gjenbruk i et stilark. De er tilgjengelige ved bruk av egendefinert var () funksjon og sett med bruk av egendefinert eiendom notasjon.
: root --main-color: goldenrod; div bakgrunnsfarge: var (- hovedfarge);
Variabler definert i :rot er globale, mens variabler definert i en velger er spesifikke for den väljeren.
div --module-farge: goldenrod; bakgrunnsfarge: var (- modul-farge);
I eksemplet over noen div Vil akseptere variabelen, men vi kan bli mer spesifikke med navngivning ved hjelp av målrettingsmetoder som klasse og id for eksempel.
De var () funksjonen kan også akseptere tilbakeslagsverdier også.
.nav bakgrunn: var (- navbg, blå);
Dette kan være nyttig i situasjoner der en variabel ikke er definert eller når du arbeider med egendefinerte elementer og Shadow DOM.
CSS-variablene er ikke helt klare for prime-tid, men utsiktene for fremtiden er veldig lyse med mange ledende nettlesere som allerede implementerer spesifikasjonen. Det er bare et spørsmål om tid til de kan brukes uten noen bekymringer, og den tiden nærmer seg raskt.
Det er mange alternativer for å kombinere CSS-variabler med animasjon. Tenk på sammenhenger som lydvisualiseringer, JavaScript-hendelsesdrevne scenarier, og til og med CSS-drevne hendelser som sveve, fokus og mål. I teorien kan en Apple Watch være koblet til en API mens du bruker en CSS-variabelbasert animasjon av et slående hjerte. Deretter har vi akselerometre, API-tilkoblinger for API og til og med gamepad-APIer, men hvorfor bør vi vurdere å animere med CSS-variabler i det hele tatt? Her er noen grunner:
Operasjoner i CSS er virkelig nøkkelen til hele puslespillet med animasjoner. CSS funksjoner som calc kan akseptere en verdi ved kjøretid og utføre operatører som multiplikasjon, divisjon, tillegg, subtraksjon, muterende verdier til en ny. Dette bidrar til å gjøre CSS-variablene dynamiske.
Nå som vi vet hvilke CSS-variabler som ser ut og hva de kan gjøre, er det på tide å få en forståelse for hvordan JavaScript passer inn i alt dette.
Accentsconagua
document.documentElement.style.getPropertyValue ( '- bgfarge'); document.documentElement.style.setProperty ('- bgcolor', 'rød'); document.documentElement.style.removeProperty ( '- bgfarge');Fremgangsmåtene som vises ovenfor, brukes til å angi, få og fjerne eiendomsverdier. De kan brukes til våre typiske CSS egenskaper (bakgrunnsfarge, skriftstørrelse etc), men de kan også brukes til CSS variabler også. Disse alternativene angir en ny verdi for den globalt definerte eiendommen ellers kjent som :rot i CSS.
De er også den virkelige hemmeligheten å animere med CSS-variabler fordi våre JS-metoder kan få, sette eller fjerne en variabel i kjøretid dynamisk!
var element = document.querySelector ('div'); element.style.getPropertyValue ( '- bgfarge'); element.style.setProperty ('- bgcolor', 'rød'); element.style.removeProperty ( '- bgfarge');Du kan også angi en ny verdi for et bestemt element hvis ønskelig. I eksempelbiten ovenfor manipulerer vi en variabel som er knyttet til en div velger versus å bli festet globalt.
Det er mange fantastiske og ekstremt talentfulle utviklere som bygger og eksperimenterer med disse konseptene av reaktive og temabaserte animasjoner ved hjelp av CSS-variabler. Her er bare noen få penner for å dykke inn og oppdage hva som skjer under hetten.
Av David Khourshid.
Dette eksemplet viser effekten av CSS variable animasjoner som brukes på en temabasert måte. Det ville vanligvis være dobbelt så mye kode å utføre denne demoen uten CSS-variabler og mange ganger mer hvis du ønsket å overskride to temaer.
Av GRAY GHOST.
Her er et annet eksempel ved å bruke museventilhendelser i JavaScript som kjører plasseringen av en sirkel.
Hver gang du beveger musen, oppdaterer JavaScript våre deklarerte variabler, slik at sirkelen kan bevege posisjon i forhold til markøren.
Av David Khourshid.
Her er det samme prinsippet som vist ovenfor, men brukt i en annen sammenheng.
Legg merke til hva som skjer når du beveger musa rundt? Ganske kul hei?
Av Wes Bos.
Hva med å oppdatere verdiene av variabler på andre måter? La oss ta en titt på følgende demonstrasjon av Wes Bos ved hjelp av glidebrytere for å oppdatere posisjonene til et bilde.
Flytt glidebryterne rundt når du er på ferie. Legg merke til kulheten som følger med? Enkelt, men bare magisk, og alt det gjør er å oppdatere variablene for transformasjonsposisjon hver gang skyvekontrollene justeres. Suuuuhhhweeet!
Av Dan Wilson.
Hva med noe litt annerledes for musikerne der ute? Sjekk ut denne hip-trekkspillet av Dan Wilson.
Jøss! Se på disse nøklene flytte! Dette kan virke litt skremmende å gå gjennom, men i kjernen er det bare JavaScript-oppdatering av CSS-variabler. Intet mer, intet mindre.
Av Dan Wilson.
I denne demoen bruker du inngangsområder for å endre hver transformasjonsegenskap og vitne om hvor glatt de er, selv om du endrer en eiendom midt overgang.
Ettersom CSS-variabler alltid er arvelige egenskaper, kan de føre til en omregning av stil på barn, som har negativ effekt på ytelsen i prosessen. Dette vil være noe du må måle, i motsetning til å gjette avhengig av konteksten din.
Huh, det virker som å endre CSS-variabler på et element som utløser en stilberegning for _all_ av sine barn. Au. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18. mai 2017
Her er en demo Shaw som er lagt ut på animasjonen på jobb Slack-gruppen som ble brukt til testing: CSS Variables Recalc Style Performance Test
Under testene (Chrome 58. Mac 10.12) ble det oppdaget at når Sett CSS Var knappen utløses til det tidspunktet nettleseren maler bakgrunnen, er det 52,84 ms tilbakekalkingstid og 51,8 ms gjengivelse. Bytte gir til CSS Property test et svært forskjellig resultat oppdages. Fra den tiden den Angi CSS Property knappen utløses til bakgrunnen maler det er omtrent 0,43ms av recalc og 0.9ms rendering.
Hvis du bytter bakgrunn ut for farge Du får tilsvarende målinger siden current kanskje eller kanskje ikke eksisterer hos barna (rop ut til David Khourshid). Enhver eiendom som er inheritable vil alltid føre til en stil recalc for alle barn. Eiendommen bakgrunnsfarge er ikke arvelig, dermed den enorme forskjellen med CSS variabler som er alltid arvelig. Vanligvis CSS egenskaper som standard til arve vil i de fleste tilfeller føre til en stor omkalkning av stiler. Det er fortsatt viktig å merke seg at endring av CSS-variabler kontinuerlig kan være en ytelseavledning. En god praksis for å unngå dette er å animere CSS-variabler på det mest spesifikke nivået (eller det dypeste nivået), for å forhindre at flere barn påvirkes. Du kan lese mer om å redusere omfanget og kompleksiteten til stilberegninger via Googles nettsider.
Jeg oppfordrer dere alle til å dykke inn og teste denne demonstrasjonen for dere selv og lage din egen konklusjon / endringer / tilpassede tester og dele resultatene dine i kommentarene. Hovedopptaket i alt dette er at CSS-variablene gir stor fleksibilitet, men det vil være prestasjonsimplikasjoner for å sette CSS-variabler på en forelder med en stor mengde barn.
Spesiell takk til gjengen i animasjonene på jobben Slakk kanal for den pågående testingen, tilbakemeldinger og diskusjoner (David Khourshid, Joni Korpi, Dan Wilson og Shaw).
