Share
Wanneer we CSS in discussies vermelden, spreken we er vaak van als een uitgedunde taal. Een verklarende taal, zonder logica en inzicht; maar dat is niet de echte realiteit. Jarenlang zochten ontwikkelaars variabelen in standaard CSS, omdat ze al zo lang bedorven waren door pre-processors zoals LESS en Sass. CSS-variabelen zijn niet alleen een echte en tastbare optie voor ontwikkelaars, ze kunnen ook worden gebruikt in animatiescenario's. Nog steeds sceptisch? Volg mee om meer te weten te komen!
CSS-variabelen zijn opgeslagen waarden die bedoeld zijn voor hergebruik in een hele stylesheet. Ze zijn toegankelijk via de custom var () functie en instellen met behulp van aangepaste eigenschap notatie.
: root - hoofdkleur: guldenroede; div background-color: var (- hoofdkleur);
Variabelen gedefinieerd binnen :wortel zijn globaal, terwijl variabelen gedefinieerd in een selector specifiek zijn voor die selector.
div --module-color: goldenrod; achtergrondkleur: var (- module-kleur);
In het bovenstaande voorbeeld een div accepteert de variabele, maar we kunnen specifieker worden met naamgeving met behulp van targetingmethoden zoals klasse en ID kaart bijvoorbeeld.
De var () functie kan ook fallback-waarden accepteren.
.nav background: var (- navbg, blue);
Dit kan handig zijn in situaties waarin een variabele nog niet is gedefinieerd of wanneer wordt gewerkt met aangepaste elementen en de Schaduw-DOM.
CSS-variabelen zijn nog niet helemaal klaar voor prime time, maar de vooruitzichten voor de toekomst zijn zeer helder met veel toonaangevende browsers die de specificaties al implementeren. Het is slechts een kwestie van tijd totdat ze zonder zorgen kunnen worden gebruikt en die tijd nadert snel.
Er zijn veel opties voor het combineren van CSS-variabelen met animatie. Denk aan contexten zoals audio-visualisaties, JavaScript-evenementgestuurde scenario's en zelfs door CSS aangestuurde evenementen zoals zweven, focus en doelwit. In theorie zou een Apple Watch kunnen worden verbonden met een API tijdens het gebruik van een op CSS-variabelen gebaseerde animatie van een kloppend hart. Dan hebben we versnellingsmeters, API's voor het kantelen van apparaten en zelfs gamepad-API's, maar waarom zouden we überhaupt overwegen om te animeren met CSS-variabelen? Hier zijn enkele redenen:
Bewerkingen in CSS zijn echt het belangrijkste onderdeel van de hele puzzel met animaties. CSS-functies zoals calc kan tijdens runtime een waarde accepteren en operatoren zoals vermenigvuldigen, delen, optellen en aftrekken uitvoeren en waarden in nieuwe muteren. Dit helpt om CSS-variabelen dynamisch te maken.
Nu we weten hoe CSS-variabelen eruit zien en wat ze kunnen doen, is het tijd om te begrijpen hoe JavaScript hierin past.
Accentsconagua
document.documentElement.style.getPropertyValue ( '- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'red'); document.documentElement.style.removeProperty ( '- bgcolor');De hierboven getoonde methoden worden gebruikt om eigenschapswaarden in te stellen, te verkrijgen en te verwijderen. Ze kunnen worden gebruikt voor onze typische CSS-eigenschappen (Achtergrond kleur, lettertypegrootte enz.), maar ze kunnen ook worden gebruikt voor CSS-variabelen. Met deze opties wordt een nieuwe waarde ingesteld voor de globaal gedefinieerde eigenschap die anders bekend staat als :wortel in CSS.
Ze zijn ook het echte geheim voor het animeren met CSS-variabelen, omdat onze JS-methoden dynamisch een variabele kunnen ophalen, instellen of verwijderen tijdens runtime.!
var element = document.querySelector ('div'); element.style.getPropertyValue ( '- bgcolor'); element.style.setProperty ('- bgcolor', 'red'); element.style.removeProperty ( '- bgcolor');U kunt desgewenst ook een nieuwe waarde voor een specifiek element instellen. In het bovenstaande voorbeeldfragment manipuleren we een variabele die is gekoppeld aan een div selector versus globaal verbonden zijn.
Er zijn tal van geweldige en bijzonder getalenteerde ontwikkelaars die bouwen aan en experimenteren met deze concepten van reactieve en op thema's gebaseerde animaties met behulp van CSS-variabelen. Hier zijn slechts een paar pennen om in te duiken en te ontdekken wat er onder de motorkap gebeurt.
Door David Khourshid.
Dit voorbeeld toont de kracht van CSS-variabele animaties die op een op thema's gebaseerde manier worden gebruikt. Het zou over het algemeen twee keer zoveel code zijn om deze demo uit te voeren zonder CSS-variabelen en vele malen meer als je twee thema's zou willen overschrijden.
Van GRAY GHOST.
Hier is nog een voorbeeld met muisevents in JavaScript die de locatie van een cirkel bepalen.
Elke keer dat u uw muis verplaatst, werkt het JavaScript onze gedeclareerde variabelen bij, zodat de cirkel in positie ten opzichte van uw cursor kan bewegen.
Door David Khourshid.
Hier is hetzelfde principe als hierboven aangetoond, maar in een andere context gebruikt.
Merk op wat er gebeurt als je je muis beweegt? Best cool he?
Door Wes Bos.
Hoe zit het met het bijwerken van de waarden van variabelen op andere manieren? Laten we de volgende demo van Wes Bos bekijken met behulp van schuifregelaars om de positie van een foto bij te werken.
Verplaats de schuifregelaars rond op uw gemak. Merk de koelte op die volgt? Eenvoudig, maar eenvoudigweg magisch en het enige dat het doet is het bijwerken van de variabelen voor de transformatiepositie telkens wanneer de schuifregelaars worden aangepast. Suuuuhhhweeet!
Door Dan Wilson.
Hoe zit het met iets anders voor de muzikanten die er zijn? Bekijk deze hippe accordeon van Dan Wilson.
Whoa! Kijk hoe die toetsen bewegen! Dit lijkt misschien een beetje intimiderend om door te maken, maar in de kern is het gewoon JavaScript-CSS-variabelen bijwerken. Niets meer niets minder.
Door Dan Wilson.
Gebruik in deze demo de invoerbereiken om elke eigenschap van de transformatie aan te passen en te zien hoe soepel ze zijn, zelfs als u de tussentijdse overgang van een eigenschap wijzigt.
Aangezien CSS-variabelen altijd overerfbare eigenschappen zijn, kunnen ze een herberekening van de stijl van kinderen veroorzaken, waardoor de prestaties in het proces nadelig worden beïnvloed. Dit zal iets zijn dat u moet meten, in tegenstelling tot raden, afhankelijk van uw context.
Het lijkt erop dat het wijzigen van CSS-variabelen in een element een stijlrecalculatie triggert voor _all_ van zijn onderliggende elementen. Ouch. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18 mei 2017
Hier is een demo die Shaw heeft gepost op de groep Animation at Work Slack die werd gebruikt voor het testen: CSS-variabelen Recalc Style Performance Test
Tijdens tests (Chrome 58. Mac 10.12) werd ontdekt dat wanneer CSS var instellen knop wordt geactiveerd totdat de browser de achtergrond verft, is er 52,84 ms recalcetijd en 51,8ms rendering. Overschakelen naar de CSS Property-test, een heel ander resultaat wordt ontdekt. Vanaf het moment dat CSS-eigenschap instellen knop wordt getriggerd totdat de achtergrond verft, is er ongeveer 0,43 ms recalc en 0,9 ms rendering.
Als je schakelt achtergrond uit voor kleur je krijgt sindsdien gelijkwaardige metingen currentcolor wel of niet bestaat in de kinderen (roep naar David Khourshid). Elke eigenschap die dat is erfelijk zal altijd een stijl recalc veroorzaken voor alle kinderen. Het eigendom Achtergrond kleur is niet overerfbaar, vandaar het enorme verschil met CSS-variabelen die dat wel zijn altijd erfelijk. Meestal CSS-eigenschappen die standaard op erven zal in de meeste gevallen een grote herwaardering van stijlen veroorzaken. Het is nog steeds belangrijk om op te merken dat het veranderen van CSS-variabelen voortdurend een prestatieafvoer kan zijn. Een goede gewoonte om dit te voorkomen, is om CSS-variabelen op het meest specifieke niveau (of het diepste niveau) te animeren, om te voorkomen dat een groot aantal kinderen wordt getroffen. U kunt meer lezen over het verkleinen van de omvang en complexiteit van stijlberekeningen via de pagina Web Fundamentals van Google.
Ik moedig jullie allemaal aan om in te duiken en deze demo zelf te testen en je eigen conclusies / wijzigingen / aangepaste tests te maken en jouw resultaten te delen in de reacties. De belangrijkste afweging bij dit alles is dat CSS-variabelen enorme flexibiliteit bieden, maar er zullen implicaties voor de prestaties zijn voor het instellen van CSS-variabelen op een ouder met een grote hoeveelheid kinderen.
Speciale dank aan de bende in het Animations At Work Slack-kanaal voor de lopende tests, feedback en discussies (David Khourshid, Joni Korpi, Dan Wilson en Shaw).
