CSSMathProduct — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSMathProduct extends CSSMathValue

Beschreibung

CSSMathProduct gehört zur CSS Typed Object Model API (Houdini) und erbt von CSSMathValue bzw. CSSNumericValue. Die Schnittstelle steht für eine Multiplikation innerhalb eines calc()-Ausdrucks. Die einzelnen Faktoren liegen als CSSNumericArray in der Eigenschaft values. Die geerbte Eigenschaft operator hat immer den Wert "product".

Meistens erzeugt man solche Objekte nicht selbst. Sie entstehen automatisch, wenn man CSSNumericValue.prototype.mul() oder div() aufruft und die Operanden sich nicht zusammenfassen lassen. CSS.px(10).mul(2) ergibt zum Beispiel direkt CSSUnitValue mit 20px. CSS.px(10).add(CSS.vw(5)).mul(2) dagegen liefert ein CSSMathProduct, weil sich px und vw erst beim Rendern verrechnen lassen.

Eine Division wird intern als Produkt mit einem CSSMathInvert-Faktor dargestellt: a.div(b) wird zu a * (1 / b). Wer Stilwerte auswertet oder umschreibt, etwa in Paint Worklets, in Animationsbibliotheken oder in Werkzeugen zum Stil-Debugging, geht deshalb die Faktoren in values durch und prüft sie mit instanceof auf ihren Typ.

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	CSSNumberish[] (number \| CSSNumericValue)		Mindestens ein Faktor. Einfache Zahlen werden automatisch in `CSSUnitValue` mit der Einheit `number` umgewandelt. Wird der Konstruktor ohne Argumente aufgerufen, wirft er einen `SyntaxError`.

Rückgabewert

Typ

CSSMathProduct

Beschreibung

Ein neues CSSMathProduct. Es hat die Eigenschaften values (CSSNumericArray, nur lesbar) und operator (immer "product") und alle Methoden von CSSNumericValue, zum Beispiel add(), mul(), to(), type() und toString().

Beispiele

Produkt direkt über den Konstruktor erzeugen

const product = new CSSMathProduct(CSS.vw(10), 2);

console.log(product.operator);        // Operator-Typ
console.log(product.values.length);   // Anzahl der Faktoren
console.log(product.toString());      // Serialisierung als calc()

product 2 calc(10vw * 2)

Automatisch entstehendes Produkt über mul()

// px und vw lassen sich erst beim Rendern verrechnen
const sum = CSS.px(10).add(CSS.vw(5));   // CSSMathSum
const doubled = sum.mul(2);

console.log(doubled instanceof CSSMathProduct);
console.log(doubled.toString());

// Gleiche Einheiten werden dagegen sofort zusammengefasst
const simple = CSS.px(10).mul(2);
console.log(simple instanceof CSSUnitValue, simple.toString());

true calc((10px + 5vw) * 2) true 20px

Faktoren untersuchen (inkl. Division als CSSMathInvert)

const ratio = CSS.px(100).div(CSS.vw(3));

console.log(ratio.constructor.name);

for (const factor of ratio.values) {
  if (factor instanceof CSSMathInvert) {
    console.log('Kehrwert von', factor.value.toString());
  } else {
    console.log('Faktor', factor.toString());
  }
}

CSSMathProduct Faktor 100px Kehrwert von 3vw

Produkt als Stilwert setzen

const box = document.querySelector('.box');

// Breite = (50% - 2rem) * 0.5
const width = CSS.percent(50).sub(CSS.rem(2)).mul(0.5);
box.attributeStyleMap.set('width', width);

console.log(box.getAttribute('style'));

width: calc((50% - 2rem) * 0.5);

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-basierten Browsern (ab Chrome/Edge 66) und in Safari (ab 16.4). Firefox unterstützt es nicht. Prüfe deshalb vorher mit if ('CSSMathProduct' in window) oder if (window.CSS?.px).
Automatische Vereinfachung: mul() gibt nur dann ein CSSMathProduct zurück, wenn sich die Operanden nicht zusammenfassen lassen. Prüfe den Ergebnistyp immer mit instanceof, statt ein Produkt vorauszusetzen.
Typprüfung: Mit new CSSMathProduct(CSS.px(1), CSS.px(1)) entsteht der Typ Länge². Das Objekt lässt sich zwar erzeugen, ist aber für Eigenschaften wie width ungültig. attributeStyleMap.set() wirft dann einen TypeError. Mit type() kannst du den Typ vorher prüfen.
Umrechnung: to() und toSum() funktionieren nur bei Einheiten, die sich ohne Layout-Kontext umrechnen lassen, zum Beispiel px in cm. Bei vw, % oder em werfen sie einen Fehler.
Die Ausgabe von toString() kann sich je nach Browser leicht unterscheiden, etwa bei Leerzeichen oder Klammern. Verwende sie nicht für exakte Vergleiche.

Siehe auch

CSSMathInvert CSSMathSum CSSMathValue CSSMathClamp CSSMathMax