web2 logo

css variabelen

In een css stylesheet kan je ook variabelen gebruiken, net zoals in programmeertalen. Waarden voor stijlelementen kan je aan het begin van je stylesheet plaatsen zodat ze eenvoudig terug te vinden en aan te passen zijn. Waarden die op meerdere elementen van toepassing zijn kan je dan in één keer aanpassen zonder dat je het hele stylesheet door hoeft. Variabelen kunnen een stylesheet ook beter leesbaar maken door gebruik te maken van een heldere naamgeving van de variabelen. De css variabelen kunnen niet alleen in stylesheets gebruikt worden, maar ook in inline style attributen en in SVG presentatie attributen. Met Javascript kan je css variabelen ook nog aanpassen.

De schrijfwijze van css variabelen

Variabelen zijn hoofdlettergevoelig! Je maakt een css variabele door de naam van de variabele te laten beginnen met 2 streepjes en er een waarde aan toe te kennen: --achtergrondkleur: #cbffb3; Variabelen zijn beschikbaar in het element waar ze een waarde krijgen en in alle kind elementen daarvan. Door de variabele toe te kennen in :root, is deze in het hele HTML document beschikbaar. Je gebruikt de variabele met var(--naam_van_de_variabele): :root { --achtergrondkleur: #cbffb3; } #div { background-color: var(--achtergrondkleur); }

Variabelen combineren

De waarde die je toekent aan een variabele mag zelf ook een variabele zijn. --lichtekleur: orange; --donkerekelur: black; --kleurverloop: linear-gradient(var(--lichtekleur), var(--donkerekleur));

Terugvalwaarden instellen

Als je het op de een of andere manier voor elkaar hebt gekregen om een ongeldige waarde aan een variabele toe te kennen, kan je voorkomen dat de eigenschap een waarde krijgt toegewezen die je misschien ongewenst vindt door een terugvalwaarde mee te geven: var(--achtergrondkleur, #cccccc); Indien in het bovenstaande voorbeeld de variabele --achtergrondkleur een ongeldige waarde heeeft, zal in plaats daarvan de opgegeven terugvalwaarde #cccccc gebruikt worden.

Het cascaderende can css variabelen

De variabelen worden door de kind-elementen geerfd van het ouder-element, net zoals andere css eigenschappen. De css: :root { --achtergrondkleur: white; } .opvallend { --achtergrondkleur: yellow; } De HTML: p { background-color: var(--achtergondkleur); } <div> <p>Achtergrondkleur is hier wit.</p> <div class="opvallend"> <p>Achtergrondkleur is hier geel.</p> </div> </div>

Variabelen gebruiken met svg

In svg tekeningen kan je ook css variabelen gebruiken: :root{ --cirkelkleur: red; } De svg: <svg viewbox="0 0 30 10"> <circle cx="5" cy="5" r="4" fill="none" stroke="var(--cirkelkleur)" /> </svg>

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ css ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.