Signatur
Beschreibung
Die schreibgeschützte Eigenschaft value gehört zur Schnittstelle CSSMathInvert aus dem CSS Typed Object Model. Ein CSSMathInvert steht für den Kehrwert eines numerischen CSS-Werts, also für den Ausdruck calc(1 / x). Über value kommt man an dieses x heran: den Wert, der invertiert wird.
In der Praxis braucht man die Eigenschaft vor allem, wenn man verschachtelte calc()-Ausdrücke untersucht. Eine Division wie a.div(b) wird intern oft als CSSMathProduct dargestellt. Darin steht der Divisor als CSSMathInvert. Mit value liest man aus einem solchen Knoten den ursprünglichen Divisor aus, zum Beispiel um einen Ausdrucksbaum zu durchlaufen, zu serialisieren oder zu prüfen.
Der Rückgabewert ist immer ein CSSNumericValue. Übergibt man dem Konstruktor eine einfache Zahl, wird sie automatisch in einen CSSUnitValue mit der Einheit "number" umgewandelt. Der Wert kann auch wieder ein zusammengesetzter Ausdruck sein, etwa ein CSSMathSum.
Rückgabewert
CSSUnitValue sein (z. B. 5px oder die Zahl 2) oder ein weiterer CSSMathValue.Beispiele
Kehrwert erzeugen und value auslesen
const inv = new CSSMathInvert(CSS.px(5));
console.log(inv.operator); // Art der Operation
console.log(inv.value.toString()); // der invertierte Wert
console.log(inv.value.unit);
console.log(inv.toString()); // als CSS-TextEine Zahl wird automatisch zu CSSUnitValue
const inv = new CSSMathInvert(2);
console.log(inv.value instanceof CSSUnitValue);
console.log(inv.value.value, inv.value.unit);Divisor aus einer Division auslesen
// 10px / 2vw lässt sich nicht vereinfachen, deshalb entsteht ein CSSMathProduct
const expr = CSS.px(10).div(CSS.vw(2));
console.log(expr.constructor.name);
for (const part of expr.values) {
if (part instanceof CSSMathInvert) {
console.log('Divisor:', part.value.toString());
} else {
console.log('Faktor:', part.toString());
}
}Rekursive Ausgabe eines Ausdrucksbaums
const describe = (node) => {
if (node instanceof CSSUnitValue) return `${node.value}${node.unit === 'number' ? '' : node.unit}`;
if (node instanceof CSSMathInvert) return `(1 / ${describe(node.value)})`;
if (node instanceof CSSMathNegate) return `-(${describe(node.value)})`;
const op = node.operator === 'sum' ? ' + ' : ' * ';
return `(${[...node.values].map(describe).join(op)})`;
};
const expr = CSS.px(100).div(CSS.px(20).add(CSS.vw(1)));
console.log(describe(expr));// Wichtig · Fallstricke
- Nur lesbar:
valueist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einenTypeErroraus. Für einen anderen Wert muss man ein neuesCSSMathInverterzeugen. - Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4. Firefox unterstützt es bisher nicht. Vorher mit
'CSSMathInvert' in windowprüfen. - Vereinfachung: Eine Division durch eine reine Zahl (z. B.
CSS.px(10).div(2)) vereinfachen die Browser direkt zu5px. Dabei entsteht keinCSSMathInvert. Man sollte sich also nicht darauf verlassen, dass jede Division einen Invert-Knoten erzeugt. - Die Einheit des Ergebnisses wird invertiert: Der Typ von
calc(1 / 5px)istlength^-1. Als eigenständige Eigenschaft ist dieser Wert in CSS meist ungültig. Sinnvoll ist er nur als Teil eines größeren Ausdrucks.