Share
När vi nämner CSS i diskussioner talar vi ofta om det som ett dumped down language. Ett deklarativt språk som saknar logik och insikt men det är inte den sanna verkligheten. I åratal har utvecklare krävt variabler i standard CSS, som har blivit bortskämda av förprocessorer som LESS och Sass så länge. CSS-variabler är inte bara ett verkligt och konkret alternativ för utvecklare, de kan också användas i animationsscenarier. Fortfarande skeptisk? Följ med för att ta reda på mer!
CSS-variabler är lagrade värden som är avsedda för återanvändning i ett stilark. De är tillgängliga med hjälp av anpassade var () funktion och inställning med hjälp av anpassad fastighetsnotering.
: root --main-color: goldenrod; div bakgrundsfärg: var (- huvudfärg);
Variabler definierade inom :rot är globala, medan variabler definierade inom en väljare är specifika för den väljaren.
div --module-färg: goldenrod; bakgrundsfärg: var (- modul-färg);
I exemplet ovan några div kommer att acceptera variabeln, men vi kunde bli mer specifika med namngivning med hjälp av inriktningsmetoder som klass och id till exempel.
De var () funktionen kan också acceptera fallback värden också.
.nav bakgrund: var (- navbg, blå);
Detta kan vara användbart i situationer där en variabel ännu inte är definierad eller när du arbetar med anpassade element och Shadow DOM.
CSS-variabler är inte helt redo för prime-tid, men framtidsutsikterna är mycket ljusa med många ledande webbläsare som redan implementerar specifikationen. Det är bara en fråga om tid tills de kan användas utan några bekymmer, och den tiden närmar sig snabbt.
Det finns många alternativ för att kombinera CSS-variabler med animering. Tänk på kontekster som ljudvisualiseringar, JavaScript-händelsedrivna scenarier och till och med CSS-driven händelser som sväva, fokus och mål. I teorin kan en Apple Watch kopplas till ett API samtidigt som man använder en CSS-variabelbaserad animering av ett slående hjärta. Då har vi accelerometrar, API-enheter för API och API-program, men varför ska vi överväga att animera med CSS-variabler alls? Här är några anledningar:
Operationer i CSS är verkligen den viktigaste delen av hela pusslet med animeringar. CSS funktioner som calc kan acceptera ett värde vid körning och utföra operatörer som multiplikation, delning, addition, subtraktion, mutationsvärden till en ny. Detta hjälper till att göra CSS-variabler dynamiska.
Nu när vi vet vilka CSS-variabler som ser ut och vad de kan göra är det dags att förstå hur JavaScript passar in i allt detta.
Accentsconagua
document.documentElement.style.getPropertyValue ( '- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'red'); document.documentElement.style.removeProperty ( '- bgcolor');De metoder som visas ovan används för att ställa in, få och ta bort egenskapsvärden. De kan användas för våra typiska CSS-egenskaper (bakgrundsfärg, textstorlek etc), men de kan också användas för CSS-variabler. Dessa alternativ kommer att ange ett nytt värde för den globalt definierade egenskapen, annars känd som :rot i CSS.
De är också den verkliga hemligheten att animera med CSS-variabler, eftersom våra JS-metoder kan få, sätta eller ta bort en variabel vid körtid dynamiskt!
var element = document.querySelector ('div'); element.style.getPropertyValue ( '- bgcolor'); element.style.setProperty ('- bgcolor', 'red'); element.style.removeProperty ( '- bgcolor');Du kan också ange ett nytt värde för ett visst element om så önskas. I exemplet ovanför manipulerar vi en variabel som är kopplad till en div väljare mot att vara fäst globalt.
Det finns gott om fantastiska och extremt begåvade utvecklare som bygger och experimenterar med dessa begrepp reaktiva och temabaserade animeringar med CSS-variabler. Här är bara några pennor för att dyka in och upptäcka vad som händer under huven.
Av David Khourshid.
Detta exempel visar effekten av CSS-variabla animeringar som används på ett temabaserat sätt. Det skulle i allmänhet vara dubbelt så mycket kod att genomföra denna demo utan CSS-variabler och många gånger mer om du önskade att överskrida två teman.
Av GRAY GHOST.
Här är ett annat exempel med hjälp av mushändelser i JavaScript som kör platsen för en cirkel.
Varje gång du flyttar musen uppdaterar JavaScript våra deklarerade variabler, så att cirkeln kan flytta position i förhållande till markören.
Av David Khourshid.
Här är samma princip som visas ovan, men används i ett annat sammanhang.
Lägg märke till vad som händer när du flyttar musen runt? Ganska cool va?
Av Wes Bos.
Vad sägs om att uppdatera värdena på variabler på andra sätt? Låt oss ta en titt på följande demo av Wes Bos med hjälp av reglagen för att uppdatera positionerna för en bild.
Flytta skjutreglagen runt på fritiden. Lägg märke till den svalka som följer? Enkelt, men helt enkelt magiskt och allt det gör är att uppdatera variablerna för transformationspositionen varje gång glidarna justeras. Suuuuhhhweeet!
Av Dan Wilson.
Vad sägs om något lite annorlunda för musikerna där ute? Kolla in detta höftdragspel av Dan Wilson.
Oj! Titta på dessa nycklar flyttar! Det kan tyckas lite skrämmande att gå igenom, men det är bara JavaScript som uppdaterar CSS-variablerna. Varken mer eller mindre.
Av Dan Wilson.
I denna demo använder du ingångsområdena för att modifiera varje omvandlingsegenskap och bevittna hur smidig de är, även om du ändrar en fastighet mittransition.
Eftersom CSS-variabler alltid är ärftliga egenskaper kan de orsaka en stilberäkning av barn som negativt påverkar prestanda i processen. Detta kommer att vara något du måste mäta, i motsats till att gissa beroende på ditt sammanhang.
Huh, det verkar ändra CSS-variabler på ett element som utlöser en stilberäkning för _all_ av sina barn. Aj. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18 maj 2017
Här är en demo Shaw som publiceras på Animation at Work Slack-gruppen som användes för testning: CSS Variables Recalc Style Performance Test
Under testen (Chrome 58. Mac 10.12) upptäcktes att när Ställ in CSS Var knappen utlöses tills tiden som webbläsaren målar bakgrunden är 52,84 ms återkalkningstid och 51,8 ms rendering. Byte av växlar till CSS Property test ett mycket annat resultat upptäcks. Från och med då Ange CSS Property knappen utlöses tills bakgrundsfärgerna finns ungefär 0,43 ms recalc och 0.9 ms rendering.
Om du byter bakgrund ute för Färg Du kommer att få motsvarande mätningar sedan currentColor kan eller kanske inte existera i barnen (ropa ut till David Khourshid). Vilken egendom som helst ärftlig kommer alltid att orsaka en stilrecalc för alla barn. Egendomen bakgrundsfärg är inte ärftlig, alltså den enorma skillnaden med CSS-variabler som är alltid ärftlig. Vanligtvis CSS egenskaper som standard till ärva kommer i de flesta fall att orsaka en stor omkalkning av stilar. Det är fortfarande viktigt att notera att byte av CSS-variabler kontinuerligt kan vara en prestandaförlust. En bra övning för att undvika detta är att animera CSS-variabler på den mest specifika nivån (eller djupaste nivån) för att förhindra en mängd barn som drabbas. Du kan läsa mer om att minska omfattningen och komplexiteten i stilberäkningar via Googles webbsidor.
Jag uppmuntrar er alla att dyka in och testa demo för er och göra egna konklusioner / ändringar / anpassade tester och dela dina resultat i kommentarerna. Den viktigaste avhämtningen i allt detta är att CSS-variabler erbjuder stor flexibilitet, men det kommer att vara prestationsimplikationer för att ställa in CSS-variabler på en förälder med en stor mängd barn.
Särskilt tack till gänget i animationerna på jobbet Slack kanal för pågående testning, feedback och diskussioner (David Khourshid, Joni Korpi, Dan Wilson och Shaw).
