Signatur
Beschreibung
Der Konstruktor CSSMathProduct() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein Objekt, das ein Produkt aus mehreren numerischen CSS-Werten darstellt. In CSS-Schreibweise entspricht das einem Ausdruck wie calc(10px * 2). Die übergebenen Werte stehen danach in der Eigenschaft values (ein CSSNumericArray), und operator hat den Wert "product".
Nützlich ist der Konstruktor, wenn Sie einen Rechenausdruck unverändert als calc() erhalten wollen, statt ihn vorab auszurechnen. Die Hilfsmethode CSSNumericValue.prototype.mul() vereinfacht das Ergebnis nämlich, wenn sie kann (CSS.px(10).mul(2) ergibt direkt 20px). Mit new CSSMathProduct() bleibt der Ausdruck dagegen als Baum erhalten. Das lohnt sich vor allem bei Einheiten, die sich erst beim Rendern auflösen lassen, etwa vw, % oder em.
Eine Division lässt sich so formulieren: Sie setzen ein CSSMathInvert-Objekt als Faktor ein. Einfache Zahlen werden automatisch in CSSUnitValue-Objekte mit der Einheit number umgewandelt. Der Konstruktor prüft außerdem, ob die Typen der Faktoren zusammenpassen. Welchen Typ das Ergebnis hat (etwa Länge oder Länge²), hängt von der Multiplikation der Einzeltypen ab.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...values Pflicht | number | CSSNumericValue | Ein oder mehrere Faktoren. Zahlen werden intern wie CSS.number(n) behandelt. Mindestens ein Argument ist Pflicht. |
Rückgabewert
CSSMathProduct-Objekt mit operator === "product". Die Faktoren stehen in values.Beispiele
Einfaches Produkt erzeugen und serialisieren
const produkt = new CSSMathProduct(CSS.px(10), 2);
console.log(produkt.operator);
console.log(produkt.values.length);
console.log(produkt.toString());Responsive Breite als calc() setzen
const box = document.querySelector('.box');
// Halbe Viewport-Breite mal Skalierungsfaktor, bleibt als calc() erhalten
const breite = new CSSMathProduct(CSS.vw(50), 0.8);
box.attributeStyleMap.set('width', breite);
console.log(box.style.width);Division mit CSSMathInvert
// Entspricht calc(100% / 3), z. B. für Spaltenbreiten
const drittel = new CSSMathProduct(CSS.percent(100), new CSSMathInvert(3));
document.querySelectorAll('.spalte').forEach((el) => {
el.attributeStyleMap.set('flex-basis', drittel);
});
console.log(drittel.toString());Vergleich mit mul() und Fehlerbehandlung
console.log(CSS.px(10).mul(2).toString()); // wird vereinfacht
try {
new CSSMathProduct(); // keine Argumente
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome und Edge ab Version 66) und in Safari ab 16.4. Firefox unterstützt es bisher nicht. Prüfen Sie vorher, ob es verfügbar ist, zum Beispiel mit
if ('CSSMathProduct' in window). Sonst brauchen Sie einen Fallback überelement.style.setProperty()mit einemcalc()-String. - Rufen Sie den Konstruktor ohne Argumente auf, wirft er einen
SyntaxError. Lassen sich die Typen der Faktoren nicht multiplizieren, wirft er einenTypeError. - Ein Produkt, das sich nicht in einen passenden Typ auflösen lässt, führt beim Setzen zu einem
TypeError. Beispiel:CSS.px(2)malCSS.px(3)ergibt Länge², und diese Einheit gilt für keine CSS-Eigenschaft. - Die Faktoren in
valuessind nur lesbar. Wollen Sie einen Faktor ändern, erzeugen Sie ein neues Objekt. - Für einfache Rechnungen ist
CSSNumericValue.prototype.mul()oft bequemer. Es vereinfacht das Ergebnis aber, wenn es kann.