DigitAP

01. custom properties

Wat zijn custom properties?

Met custom properties, ook wel CSS variabelen genoemd, kan je variabelen definiëren voor hergebruik in je CSS bestanden. Dit is een geweldige functie omdat het betekent dat we ze kunnen definiëren met standaardwaarden en vervolgens indien nodig kunnen overschrijven. Je kan ze vergelijken met het let keyword van Typescript of Javascript voor het definiëren van een variabele.

Een custom property kan je definiëren door het een naam naar keuze te geven, voorafgegaan door twee streepjes, bijvoorbeeld: --background-color. Vervolgens kan je de waarde gebruiken door deze aan te roepen binnen de var() CSS-functie.

In het onderstaande voorbeeld definiëren we een custom property --color en gebruiken we deze voor de kleurwaarde:

:root {
  --color: red;
}

button {
  color: var(--color);
}

In HTML vertegenwoordigt de :root pseudo-klasse het <html>-element en is identiek aan de selector html, behalve dat de specificiteit hoger is.

Wat is het nut van custom properties?

Laten we dat beantwoorden door ons vorige codevoorbeeld voor het wijzigen van de kleur van een button te verbeteren.

Indien we op verschillende plaatsen dezelfde kleur gebruiken kunnen we deze gemakkelijk aanpassen met behulp van custom properties.

:root {
  --color: red; /* door een regel code aan te passen kan je de gehele website updaten. */
}

button {
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  text-decoration: none;
}

.title {
  font-size: 3rem;
  color: var(--color);
}

footer {
  height: 100px;
  background-color: var(--color);
}

In plaats van op elke coderegel apart de kleur aan te passen wordt dit in het voorbeeld hierboven vereenvoudigd. We moeten enkel de waarde van onze custom property in de :root pseudo-klasse veranderen.

Een andere reden waarvoor je custom properties kan gebruiken is de volgende:

button {
  --color: red;
  color: var(--color);
  border: 2px solid var(--color);
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  text-decoration: none;
}

button:hover {
  --color: green;
}

Als we de tekstkleur van de knop en rand bij hover willen wijzigen, hoeven we die properties niet meer te herhalen. In plaats daarvan kunnen we gewoon de waarde --color wijzigen.

Merk op hoe we de functie var() kunnen gebruiken als slechts een deel van de waarde, in dit geval om de randkleur te definiëren. Dit opent de deur tot eindeloze mogelijkheden voor custom properties!

Custom properties met default waarden

Een kenmerk van var() is de mogelijkheid om zowel een custom property aan te roepen en een fallback in te stellen die je ook als default (standaard) kan beschouwen. Met andere woorden, indien de custom property geen waarde bevat, zal de default waarde worden gebruikt.

var(--bg-color, black)

We kunnen zelfs de default instellen met een andere custom property. Laten we met dat idee een andere versie van onze button maken om het wijzigen van de --border-color mogelijk te maken en tegelijkertijd de variabele --color als default in te stellen.

.button {
  --color: red;
  color: var(--color);
  border: 2px solid var(--border-color, var(--color));
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  text-decoration: none;
}

button:hover {
  --border-color: green;
}
Previous06. lay-out met flexNext02. CSS transitions

Last updated