Zum Hauptinhalt springen

CSS Variables

ChatGPT öffnen

CSS-Variablen spielen eine zentrale Rolle bei der Anpassung des Erscheinungsbildes von webforJ-Komponenten. Diese Variablen speichern wiederverwendbare Werte wie Farben, Schriftgrößen und Abstände, die konsistent in Ihrer App angewendet werden können.

Anders als traditionelle Ansätze, die auf CSS-Präprozessoren wie SASS oder LESS basierten, ermöglichen CSS-Variablen dynamisches Styling zur Laufzeit. Sie reduzieren die Wiederholung, verbessern die Wartbarkeit und machen Stylesheets leichter lesbar und verwaltbar.

CSS-Variablen definieren​

CSS-Variablen werden mit einem Doppelstrich (--) Präfix definiert und können innerhalb jedes CSS-Selectors lokalisiert werden. Die gängigste Praxis besteht jedoch darin, sie im :root-Selector zu definieren, der sie global scopt.

:root {
  --app-background: orange;
}
Die :root Pseudo-Klasse

Die :root Pseudo-Klasse zielt auf das Wurzelement des Dokuments ab – typischerweise <html> in HTML. Sie verhält sich wie html, hat jedoch eine höhere Spezifität.

CSS-Variablen können jede Zeichenfolge enthalten, nicht nur gültige CSS-Werte. Diese Flexibilität ist besonders nützlich, wenn Sie mit JavaScript arbeiten.

html {
  --app-title: webforJ;
}

Komponentenspezifische Variablen​

Um eine Variable für eine bestimmte Komponente zu definieren oder zu überschreiben, deklarieren Sie sie innerhalb des Selektors der Komponente:

dwc-button {
  --dwc-button-font-weight: 400;
}
Referenz für komponentenspezifisches Styling

Jede webforJ-Komponente unterstützt eine spezifische Reihe von CSS-Variablen, die ihr Erscheinungsbild steuern. Diese sind im Abschnitt Styling > CSS-Eigenschaften für jede Komponente dokumentiert.

CSS-Variablen verwenden​

Verwenden Sie die var() Funktion, um den Wert einer Variable in Ihren Stilen anzuwenden:

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

Sie können auch einen Fallback-Wert angeben, falls die Variable nicht definiert ist:

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

Variablen mit webforJ manipulieren​

CSS-Variablen können über die webforJ-API dynamisch aktualisiert werden, was eine Echtzeitgestaltung ermöglicht:

// Setzen Sie eine CSS-Variable
button.setStyle('--dwc-button-font-weight', '400');
Manipulation von CSS-Variablen mit JavaScript

webforJ ermöglicht es Ihnen, JavaScript auf der Client-Seite mit der Page- oder Element-API auszuführen. Das bedeutet, dass Sie CSS-Variablen zur Laufzeit dynamisch manipulieren können, genau wie Sie es in Standard-Webanwendungen tun würden.

// Setzen Sie eine CSS-Variable
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// Holen Sie sich eine CSS-Variable
const value = el.style.getPropertyValue('--dwc-font-size-m');

Weitere Ressourcen​