0Pricing
Frontend Academy · Lektion

CSS Custom Properties: deklarieren und aktualisieren

Deklarieren Sie Variablen mit -- auf :root, referenzieren Sie sie mit var() und aktualisieren Sie sie dynamisch mit JavaScript für ein Theme in Echtzeit.

CSS Custom Properties: deklarieren und aktualisieren ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Zusammenfassung: Deklaration und Gültigkeitsbereiche

Benutzerdefinierte CSS-Eigenschaften werden mit dem Präfix -- auf jedem Element deklariert. Auf :root deklarierte Eigenschaften sind global verfügbar. Kindelemente erben die Werte und können sie lokal überschreiben.

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

Live-Aktualisierungen mit JavaScript

Benutzerdefinierte Eigenschaften können zur Laufzeit geändert werden. Verwenden Sie element.style.setProperty('--name', value) für Überschreibungen auf Elementebene oder aktualisieren Sie eine globale Variable auf :root, um alle Nutzer sofort zu beeinflussen.

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

Werte benutzerdefinierter Eigenschaften in JS lesen

Lesen Sie eine benutzerdefinierte Eigenschaft mit getComputedStyle(element).getPropertyValue('--name').trim() aus. Dadurch wird der berechnete (kaskadierte) Wert gelesen, nicht nur der Inline-Wert.

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

Benutzerdefinierte Eigenschaften animieren

Benutzerdefinierte Eigenschaften können vom Browser mithilfe von @property (Houdini) interpoliert oder in Transitionen verwendet werden, wenn sie mit calc() kombiniert werden. Ohne @property können Browser nicht direkt zwischen Variablenwerten überblenden.

@property — Registrierte benutzerdefinierte Eigenschaften

Die CSS-Regel @property registriert eine benutzerdefinierte Eigenschaft mit einem Typ, einem Anfangswert und einer Vererbungsregel. Registrierte Eigenschaften können nativ in Transitionen und Animationen verwendet werden.

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

Token-Systeme mit benutzerdefinierten Eigenschaften

Modell für Design-Token: Speichern Sie alle Designentscheidungen als benutzerdefinierte Eigenschaften. Komponenten verwenden Tokens statt fest codierter Werte. Änderungen an einem Token werden überall übernommen.

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

Responsive benutzerdefinierte Eigenschaften

Ändern Sie die Werte benutzerdefinierter Eigenschaften innerhalb von Media Queries. Komponenten, die die Variablen verwenden, passen sich automatisch an — das ist übersichtlicher, als für jeden Breakpoint separate Komponentenregeln zu schreiben.

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

Benutzerdefinierte Eigenschaften in calc()

Verwenden Sie Variablen innerhalb von calc() für abgeleitete Abstände und Größen. So entsteht ein kohärentes, mathematisch konsistentes Größensystem.

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

Theming mehrerer Marken

Legen Sie für jedes data-Attribut unterschiedliche Theme-Token fest. Eine Seite kann dadurch mehrere Themes für White-Labeling unterstützen.

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

Benutzerdefinierte Eigenschaften in SVG

SVG-Attribute wie fill und stroke können benutzerdefinierte Eigenschaften verwenden. Dadurch können Sie Icons über CSS mit Themes versehen, ohne das SVG-Markup zu ändern.

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

Benutzerdefinierte Eigenschaften debuggen

Wählen Sie in den Chrome DevTools ein Element aus und suchen Sie im Tab Computed nach den Werten benutzerdefinierter Eigenschaften. Der Bereich Styles zeigt, wo die einzelnen Variablen deklariert sind. Im Abschnitt Inherited sehen Sie Variablen aus übergeordneten Elementen.

Schnelltest

Welche JavaScript-Methode aktualisiert eine benutzerdefinierte CSS-Eigenschaft auf einem Element?

Zusammenfassung: Benutzerdefinierte CSS-Eigenschaften im Detail

Für globale Werte auf :root deklarieren, für lokale Gültigkeitsbereiche auf Nachfahren überschreiben. Mit style.setProperty aus JavaScript aktualisieren. Mit getComputedStyle auslesen. @property ermöglicht native Transitionen. Als Design-Token verwenden, um eine zentrale Quelle der Wahrheit zu schaffen. Für responsive Tokens in Media Queries überschreiben.

Häufig gestellte Fragen

Ist die Lektion „CSS Custom Properties: deklarieren und aktualisieren“ kostenlos?

Ja — der vollständige Text von „CSS Custom Properties: deklarieren und aktualisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS Custom Properties: deklarieren und aktualisieren“?

Deklarieren Sie Variablen mit -- auf :root, referenzieren Sie sie mit var() und aktualisieren Sie sie dynamisch mit JavaScript für ein Theme in Echtzeit. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „CSS Custom Properties: deklarieren und aktualisieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. CSS Custom Properties: deklarieren und aktualisieren
  2. Transitions: Eigenschaft, Dauer, Timing
  3. @keyframes-Animationen
  4. prefers-reduced-motion berücksichtigen
← Zurück zu Frontend Academy