Overslaan naar hoofdinhoud

CSS Variables

Openen in ChatGPT

CSS-variabelen spelen een centrale rol bij het aanpassen van het uiterlijk van webforJ-componenten. Deze variabelen slaan herbruikbare waarden op, zoals kleuren, lettergroottes en spacing, die consistent in je app kunnen worden toegepast.

In tegenstelling tot traditionele benaderingen die afhankelijk waren van CSS-preprocessors zoals SASS of LESS, stellen CSS-variabelen dynamische styling tijdens runtime mogelijk. Ze verminderen herhaling, verbeteren de onderhoudbaarheid en maken stijlen gemakkelijker te lezen en te beheren.

CSS-variabelen definiëren​

CSS-variabelen worden gedefinieerd met een dubbele streepje (--) prefix en kunnen binnen elke CSS-selector worden gescopeerd. De meest gebruikelijke praktijk is echter om ze in de :root-selector te definiëren, wat ze globaal scopeert.

:root {
  --app-background: orange;
}
De :root pseudo-klasse

De :root pseudo-klasse richt zich op het root-element van het document—typisch <html> in HTML. Het gedraagt zich als html, maar met een hogere specificiteit.

CSS-variabelen kunnen elke string bevatten, niet alleen geldige CSS-waarden. Deze flexibiliteit is bijzonder nuttig bij het werken met JavaScript.

html {
  --app-title: webforJ;
}

Component-specifieke variabelen​

Om een variabele voor een specifieke component te definiëren of te overschrijven, declareer je deze binnen de selector van de component:

dwc-button {
  --dwc-button-font-weight: 400;
}
Component-specifieke stylingreferentie

Elke webforJ-component ondersteunt een specifieke set CSS-variabelen die de uitstraling ervan controleren. Deze zijn gedocumenteerd onder de sectie Styling > CSS-eigenschappen voor elke component.

CSS-variabelen gebruiken​

Gebruik de var() functie om de waarde van een variabele in jouw stijlen toe te passen:

.panel {
  background-color: var(--app-background);
}

Je kunt ook een fallback-waarde specificeren voor het geval de variabele niet is gedefinieerd:

.frame {
  background-color: var(--app-background, red);
}

Variabelen manipuleren met webforJ​

CSS-variabelen kunnen dynamisch worden bijgewerkt via de webforJ API, wat realtime styling mogelijk maakt:

// Stel een CSS-variabele in
button.setStyle('--dwc-button-font-weight', '400');
CSS-variabelen manipuleren met JavaScript

webforJ stelt je in staat om JavaScript aan de clientzijde uit te voeren met behulp van de Pagina- of Element-API. Dit betekent dat je CSS-variabelen dynamisch kunt manipuleren tijdens runtime, net zoals je zou doen in standaard webapplicaties.

// Stel een CSS-variabele in
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// Haal een CSS-variabele op
const value = el.style.getPropertyValue('--dwc-font-size-m');

Aanvullende bronnen​