Signatur
Beschreibung
CSSMathSum ist Teil der CSS Typed Object Model API (Houdini) und steht für einen calc()-Ausdruck, in dem Werte addiert werden. Solche Objekte entstehen, wenn man Werte mit unterschiedlichen, nicht ineinander umrechenbaren Einheiten verknüpft, z. B. % und px oder vw und rem. Der Browser kann diese erst beim Layout auflösen, deshalb bleibt die Summe als strukturierter Ausdruck erhalten.
Ein CSSMathSum entsteht auf drei Wegen: direkt über den Konstruktor new CSSMathSum(...values), über die Methoden add() und sub() von CSSNumericValue oder beim Auslesen eines calc()-Werts über element.attributeStyleMap.get() bzw. computedStyleMap(). Subtraktion wird intern als Summe mit einem CSSMathNegate-Summanden dargestellt, calc(a - b) ist also ein CSSMathSum aus a und -b.
Die Schnittstelle erbt von CSSMathValue und CSSNumericValue. Wichtige Mitglieder sind:
values: einCSSNumericArraymit den einzelnen Summanden (nur lesbar, aber iterierbar)operator: immer"sum"- geerbte Methoden wie
add(),sub(),mul(),div(),equals(),type()undtoString()
Das Interface ist nützlich, wenn man Stilwerte per Skript typsicher berechnen will, ohne Strings wie `calc(${a}% - ${b}px)` zusammenzusetzen und wieder zu zerlegen. Das ist fehleranfällig und langsamer.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...values Pflicht | CSSNumberish (number | CSSNumericValue) | Parameter des Konstruktors new CSSMathSum(...values): ein oder mehrere Summanden. Einfache Zahlen werden in CSSUnitValue mit der Einheit number umgewandelt. Ohne Argument wird ein SyntaxError geworfen, bei nicht addierbaren Typen (z. B. px + s) ein TypeError. |
Rückgabewert
CSSMathSum-Objekt. Seine Eigenschaft values (CSSNumericArray) enthält die Summanden, operator ist "sum".Beispiele
Summe per Konstruktor erzeugen und untersuchen
const sum = new CSSMathSum(CSS.px(10), CSS.percent(50));
console.log(sum.operator); // Art der Operation
console.log(sum.values.length); // Anzahl der Summanden
console.log(sum.toString()); // als CSS-Text
for (const part of sum.values) {
console.log(part.value, part.unit);
}Entstehung über add() und sub()
// Gleiche Einheiten werden direkt zusammengefasst
const simple = CSS.px(10).add(CSS.px(5));
console.log(simple.constructor.name, simple.toString());
// Unterschiedliche Einheiten ergeben eine CSSMathSum
const width = CSS.vw(100).sub(CSS.px(40));
console.log(width instanceof CSSMathSum); // true
console.log(width.toString());
console.log(width.values[1] instanceof CSSMathNegate); // Subtraktion = negierter Summandcalc()-Wert eines Elements typsicher lesen und setzen
const box = document.querySelector('.box');
box.style.width = 'calc(100% - 2rem)';
const current = box.attributeStyleMap.get('width');
console.log(current.constructor.name); // CSSMathSum
console.log(current.toString());
// Seitenabstand dynamisch vergrößern, ohne String-Bastelei
const padding = CSS.rem(1);
box.attributeStyleMap.set('width', current.sub(padding));
console.log(box.style.width);// Wichtig · Fallstricke
- Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-basierten Browsern (ab Version 66) und in Safari (ab 16.4). Firefox unterstützt es bisher nicht. Vorher mit
if ('CSSMathSum' in window)oderif (window.CSS && CSS.px)prüfen und notfalls auf String-Werte überelement.styleausweichen. - Ob beim Rechnen ein
CSSMathSumentsteht, ist nicht garantiert: Lassen sich die Einheiten zusammenfassen (z. B.px + px), liefernadd()/sub()einen einfachenCSSUnitValue. Das Ergebnis also nicht blind alsCSSMathSumbehandeln, sondern mitinstanceofprüfen. - Subtraktion erzeugt keinen eigenen Typ „CSSMathDifference“, sondern einen
CSSMathNegate-Summanden. Wervaluesauswertet, muss das berücksichtigen. - Einen
CSSMathSummit relativen Einheiten (z. B.%,vw) kannto('px')nicht umrechnen; dann wird einTypeErrorgeworfen. Der konkrete Pixelwert steht erst nach dem Layout fest, etwa übergetBoundingClientRect(). - Die genaue Form der Serialisierung (
toString()) kann sich zwischen Browsern leicht unterscheiden, z. B. bei Vereinfachung und Reihenfolge der Summanden.