Fallback-Werte und var()
Geben Sie in var() Fallback-Werte an, falls eine Custom Property nicht definiert oder ungültig ist.
Fallback-Werte und var() ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Fallback-Syntax von var()
Die Funktion var() akzeptiert ein optionales zweites Argument als Fallback-Wert, der verwendet wird, wenn die benutzerdefinierte Eigenschaft nicht definiert ist.
<button class="button">Fallback: royalblue</button>
Wann Fallbacks greifen
Der Fallback wird verwendet, wenn:
- Die Eigenschaft im jeweiligen Gültigkeitsbereich nicht definiert ist
- Die Eigenschaft den Wert
initialhat - Die Eigenschaft mit einem für ihren Kontext ungültigen Wert deklariert wurde
Mehrere Fallback-Ebenen
Verschachteln Sie var()-Aufrufe, um mehrere Fallback-Ebenen zu verketten:
<p class="text">Falls through two levels to #3b82f6</p>
Fallbacks können beliebige Werte sein
Fallbacks können jeden für die Eigenschaft gültigen Wert annehmen – einschließlich anderer Variablen, berechneter Werte oder Literale:
<div class="card">16px / 50%</div>
Das Schlüsselwort initial
Wenn Sie eine benutzerdefinierte Eigenschaft auf initial setzen, wird sie so behandelt, als wäre sie nie gesetzt worden. In Kombination mit einem Fallback können Komponenten dadurch eine geerbte benutzerdefinierte Eigenschaft nicht verwenden.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Garantiert ungültiger Wert
Die Verwendung von initial als Wert einer benutzerdefinierten Eigenschaft garantiert, dass der Fallback ausgelöst wird. Damit lassen sich optionale Feature-Schalter in CSS erstellen.
Benutzerdefinierte Eigenschaft + @property
Die @property-Regel (Houdini) registriert eine typisierte benutzerdefinierte Eigenschaft mit einem garantierten Anfangswert. Das ist robuster, als sich auf Fallbacks zu verlassen.
<div class="track">
<div class="bar"></div>
</div>
Fallback für animationssichere Werte
Stellen Sie sicher, dass Übergänge auch dann funktionieren, wenn eine benutzerdefinierte Eigenschaft nicht gesetzt ist, indem Sie einen sicheren Fallback bereitstellen, von dem aus ein Übergang möglich ist:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Fehlende Variablen untersuchen
Wenn eine benutzerdefinierte Eigenschaft fehlt und kein Fallback angegeben ist, wird für die Eigenschaft ihr Anfangswert berechnet (häufig das Schlüsselwort initial). Bei Farben kann dies zu unerwarteten transparenten oder schwarzen Ergebnissen führen. Fügen Sie für wichtige Eigenschaften immer Fallbacks hinzu.
var() in benutzerdefinierten Eigenschaften
Werte benutzerdefinierter Eigenschaften können selbst auf andere benutzerdefinierte Eigenschaften verweisen und so eine Kette von Tokens bilden:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Fallbacks und Spezifität
Fallbacks haben nichts mit der Spezifität zu tun – sie kommen nur zum Einsatz, wenn die referenzierte benutzerdefinierte Eigenschaft nicht definiert oder ungültig ist. Die Spezifität bestimmt, welche Regel die benutzerdefinierte Eigenschaft festlegt, nicht, welcher Fallback verwendet wird.
Schnellüberprüfung
Was bewirkt color: var(--theme-text, #111), wenn --theme-text nicht definiert ist?
Zusammenfassung
var(--name, fallback) stellt einen Fallback bereit, wenn die benutzerdefinierte Eigenschaft nicht definiert ist. Fallbacks können für mehrere Ebenen verschachtelt werden. Verwenden Sie @property für typisierte benutzerdefinierte Eigenschaften mit garantierten Anfangswerten. Geben Sie für wichtige visuellen Eigenschaften immer Fallbacks an.
Häufig gestellte Fragen
Ist die Lektion „Fallback-Werte und var()“ kostenlos?
Ja — der vollständige Text von „Fallback-Werte und var()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fallback-Werte und var()“?
Geben Sie in var() Fallback-Werte an, falls eine Custom Property nicht definiert oder ungültig ist. Du übst CSS 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 CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS 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 2 von 4.
Wie lange dauert die Lektion „Fallback-Werte und var()“?
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 CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS 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
- Benutzerdefinierte Eigenschaften deklarieren und verwenden
- Fallback-Werte und var()
- Variablen auf Komponenten begrenzen
- Variablen mit JavaScript aktualisieren