CSS Variable anlegen - (Custom Properties) 

Anwendung

Für die meisten user.css-Anwendungen sind CSS-Variablen sehr nützlich, besonders für persönliche Anpassungen die regelmäßig geändert werden.

Verwende CSS-Variablen in user.css wenn:

• Du mehrere zusammenhängende Werte hast
• Du Anpassungen für andere ermöglichen willst
• Du Theme-Support brauchst
• Das Stylesheet komplex ist (> 100 Zeilen)

Vermeide sie wenn:

• Das Stylesheet sehr einfach ist
• Du maximielle Browser-Kompatibilität brauchst
• Performance kritisch ist

VORTEILE

✅ Flexibilität und Anpassbarkeit

• Benutzer können Werte leicht ändern ohne CSS-Kenntnisse
• Einfache Dark/Light-Mode Umschaltung:

@media (prefers-color-scheme: dark) {
:root {
--background: #1a1a1a;
--text-color: #ffffff;
}
}

✅ Wartbarkeit

• Zentrale Änderungen möglich
• Konsistente Werte über das gesamte Stylesheet
• Reduzierte Redundanz

✅ Dynamische Anpassung

• Werte können zur Laufzeit geändert werden
• JavaScript-Interaktion möglich:

javascript

document.documentElement.style.setProperty('--primary-color', '#ff0000');

✅ Browser-Support

• Moderne Browser unterstützen CSS-Variablen gut
• Fallback-Mechanismus:

color: var(--text-color, #000000); /* Fallback zu Schwarz */

✅ Kaskadierende Natur

• Variablen erben und überschreiben wie andere CSS-Eigenschaften
• Verschiedene Werte für verschiedene Kontexte

NACHTEILE

Browser-Kompatibilität

• Ältere Browser (IE11) unterstützen keine CSS-Variablen
• Benötigt Fallbacks für maximale Kompatibilität

Performance

• Übermäßiger Gebrauch kann die Performance beeinträchtigen
• Dynamische Änderungen lösen Layout-Recalculations aus

Debugging

• Schwieriger zu debuggen als direkte Werte
• Browser-DevTools zeigen manchmal nur var(--name) statt des berechneten Werts

Komplexität

• Zusätzliche Abstraktionsebene
• Kann für einfache user.css übermäßig sein

Typisierung

• Keine Typüberprüfung (z.B. Farbwerte vs. Pixelwerte)
• Fehler erscheinen erst zur Laufzeit

1. Variablen definieren (zentral)

Ganz oben in deiner user.css:

:root {

/* Farben */
--farbe-haupt: #0d3560; /* dunkelblau */
--farbe-akzent: #FFF3C4; /* aprikose */
--farbe-text: #000000; /* schwarz */
--farbe-hintergrund: #ffffff;/* weiss */
--farbe-rahmen: #dddddd; /* hellgrau */

/* Links */
--link-farbe: blau;
--link-hover: dunkelblau;

/* Schrift */
--schrift-standard: Arial, Helvetica, sans-serif;
--schrift-groesse-normal: 16px;
--schrift-groesse-h1: 24px;
--schrift-groesse-h2: 20px;
--schrift-fett: 700;

/* Abstände */
--abstand-klein: 5px;
--abstand-normal: 10px;
--abstand-gross: 20px;

/* Rahmen */
--rahmen-standard: 1px solid var(--farbe-rahmen);

}

2. Anwenden (Beispiel Breadcrumb)

Hintergrund Aprikose, Schrift Schwarz