Signatur
Beschreibung
Die Eigenschaft fallback eines CSSVariableReferenceValue-Objekts steht für den zweiten, optionalen Teil eines var()-Ausdrucks im CSS Typed OM. Bei var(--akzent, rebeccapurple) liefert variable den Namen "--akzent". fallback enthält dagegen den Ersatzwert rebeccapurple, den der Browser verwendet, wenn die benutzerdefinierte Eigenschaft nicht definiert ist.
Der Wert ist kein einfacher String, sondern ein CSSUnparsedValue. Das ist eine Liste von Token-Bestandteilen, die sich wie ein Array durchlaufen lässt. Sie kann Strings und weitere, verschachtelte CSSVariableReferenceValue-Objekte enthalten, zum Beispiel bei var(--a, var(--b, blue)). Wurde kein Fallback angegeben, ist der Wert null.
Typische Einsatzfälle sind Werkzeuge, die Stylesheets oder Inline-Styles auswerten: Design-Token-Prüfer, Theme-Editoren oder Debugging-Hilfen, die zeigen sollen, auf welchen Wert eine Variable zurückfällt. Den Fallback legt man beim Erzeugen über den Konstruktor new CSSVariableReferenceValue(variable, fallback) fest.
Rückgabewert
CSSUnparsedValue mit den Bestandteilen des Fallback-Werts oder null, wenn der var()-Ausdruck keinen Fallback hat.Beispiele
Referenz mit und ohne Fallback erzeugen
// var(--akzent, rebeccapurple) nachbauen
const mitFallback = new CSSVariableReferenceValue(
'--akzent',
new CSSUnparsedValue(['rebeccapurple'])
);
const ohneFallback = new CSSVariableReferenceValue('--akzent');
console.log(mitFallback.variable); // Name der Variable
console.log(mitFallback.fallback.toString()); // Fallback als Text
console.log(ohneFallback.fallback); // kein FallbackFallback aus einem Inline-Style auslesen
const box = document.createElement('div');
box.style.setProperty('color', 'var(--textfarbe, #333)');
// attributeStyleMap liefert den unaufgelösten Wert
const wert = box.attributeStyleMap.get('color'); // CSSUnparsedValue
for (const teil of wert) {
if (teil instanceof CSSVariableReferenceValue) {
const fb = teil.fallback;
console.log(`${teil.variable} → Fallback: ${fb ? fb.toString().trim() : '(keiner)'}`);
}
}Verschachtelte Fallbacks rekursiv auflösen
// Gibt die Kette aller Variablen und des letzten Ersatzwerts aus
const fallbackKette = (ref) => {
const kette = [ref.variable];
let aktuell = ref.fallback;
while (aktuell) {
const naechste = [...aktuell].find(
(t) => t instanceof CSSVariableReferenceValue
);
if (!naechste) {
kette.push(aktuell.toString().trim());
break;
}
kette.push(naechste.variable);
aktuell = naechste.fallback;
}
return kette;
};
const innen = new CSSVariableReferenceValue('--basis', new CSSUnparsedValue(['blue']));
const aussen = new CSSVariableReferenceValue('--primaer', new CSSUnparsedValue([innen]));
console.log(fallbackKette(aussen).join(' → '));// Wichtig · Fallstricke
- Nur lesbar:
fallbacklässt sich nach dem Erzeugen nicht neu zuweisen; im strikten Modus löst eine Zuweisung einenTypeErroraus. Für einen anderen Fallback erzeugt man ein neues Objekt. Die Eigenschaftvariableist dagegen schreibbar. - Kein String: Der Wert ist ein
CSSUnparsedValue. Für die Textdarstellung isttoString()nötig. Beim Parsen aus CSS können führende Leerzeichen erhalten bleiben (z. B." #333"), daher ggf.trim()verwenden. - Immer auf
nullprüfen: Ohne Fallback imvar()-Ausdruck ist der Wertnull. Optional Chaining (ref.fallback?.toString()) verhindert Fehler. computedStyleMap()hilft hier nicht: Berechnete Werte sind bereits aufgelöst und enthalten keinevar()-Referenzen mehr. Unaufgelöste Werte bekommt man überelement.attributeStyleMapoderCSSStyleRule.styleMap.- Kompatibilität: Teil des CSS Typed OM. Chromium-Browser unterstützen es seit Version 66, Safari seit 16.4. Firefox unterstützt es derzeit nicht, daher vorher prüfen, z. B. mit
if ('CSSVariableReferenceValue' in window).