Signatur
Beschreibung
CSSMathMax gehört zur CSS Typed Object Model API (Houdini) und steht für einen CSS-Ausdruck der Form max(a, b, …). Statt Zeichenketten wie "max(200px, 50%)" zusammenzusetzen, arbeitest du mit typisierten Objekten. Der Browser prüft dabei, ob die Einheiten zueinander passen. Das Ergebnis kannst du direkt über element.attributeStyleMap setzen.
Die Schnittstelle erbt von CSSMathValue und damit auch von CSSNumericValue und CSSStyleValue. Die wichtigsten Eigenschaften:
values: ein schreibgeschütztesCSSNumericArraymit allen Argumenten des Ausdrucks.operator(geerbt): hat immer den Wert"max".
Ein CSSMathMax entsteht auf drei Wegen: mit dem Konstruktor, beim Auslesen eines max()-Werts aus attributeStyleMap (angegebener Wert) oder über CSSNumericValue.parse(). Außerdem gibt CSSNumericValue.prototype.max() ein CSSMathMax zurück, wenn der Browser die Argumente nicht sofort zu einem einzigen Wert verrechnen kann, zum Beispiel bei px und vw.
Typische Einsatzfälle sind responsive Mindestgrößen wie „mindestens 200px, sonst 50 % der Breite“. Solche Werte erzeugst du damit aus JavaScript heraus, etwa in Animationen, CSS Paint Worklets oder Layout-Bibliotheken, ohne Strings zu parsen oder zusammenzusetzen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...values Pflicht | number | CSSNumericValue | Eines oder mehrere Argumente des max()-Ausdrucks. Reine Zahlen werden in CSSUnitValue mit der Einheit "number" umgewandelt. Alle Argumente müssen einen kompatiblen Typ haben, also zum Beispiel alle Längen oder alle Zeitangaben. |
Rückgabewert
new CSSMathMax(...values) liefert ein neues CSSMathMax-Objekt. Dessen Eigenschaft values enthält die übergebenen Argumente als CSSNumericArray.Beispiele
Instanz erzeugen und untersuchen
const breite = new CSSMathMax(CSS.px(200), CSS.percent(50));
console.log(breite.operator); // Art der Rechenoperation
console.log(breite.values.length); // Anzahl der Argumente
console.log(breite.toString()); // serialisiertes CSSResponsive Mindestbreite per attributeStyleMap setzen
const karte = document.querySelector('.karte');
// Mindestens 320px, sonst 40vw – je nachdem, was größer ist
karte.attributeStyleMap.set(
'width',
new CSSMathMax(CSS.px(320), CSS.vw(40))
);
console.log(karte.style.width);Vorhandenen max()-Wert auslesen und die Argumente durchlaufen
const box = document.querySelector('#box');
box.style.padding = 'max(1rem, 2vh)';
const wert = box.attributeStyleMap.get('padding-top');
if (wert instanceof CSSMathMax) {
for (const arg of wert.values) {
console.log(`${arg.value} ${arg.unit}`);
}
}max() über CSSNumericValue.prototype.max() und parse()
// Gleiche Einheit: wird sofort verrechnet → CSSUnitValue
console.log(CSS.px(10).max(CSS.px(30)).toString());
// Verschiedene Einheiten: nicht auflösbar → CSSMathMax
const gemischt = CSS.px(10).max(CSS.em(2));
console.log(gemischt instanceof CSSMathMax, gemischt.toString());
// Aus einem String parsen
const geparst = CSSNumericValue.parse('max(5px, 1em, 3vw)');
console.log(geparst.constructor.name, geparst.values.length);// Wichtig · Fallstricke
- Browser-Kompatibilität: Chromium-basierte Browser unterstützen die Schnittstelle ab Version 66 (Chrome, Edge, Opera), Safari ab 16.4. Firefox unterstützt das CSS Typed OM bisher nicht. Prüfe deshalb vorher auf Unterstützung, etwa mit
if ('CSSMathMax' in window), und weiche sonst aufelement.style.width = 'max(…)'aus. - Inkompatible Typen:
new CSSMathMax(CSS.px(1), CSS.s(1))wirft einenTypeError, weil sich Länge und Zeit nicht vergleichen lassen. - Mindestens ein Argument: Ein Aufruf ohne Argumente (
new CSSMathMax()) wirft einenSyntaxError. - Angegebener und berechneter Wert:
element.computedStyleMap()liefert meist schon den aufgelösten Wert, zum BeispielCSSUnitValueinpx. NurattributeStyleMapoder die Stylesheet-Regeln (CSSStyleRule.styleMap) geben den ursprünglichenCSSMathMaxzurück. valuesist schreibgeschützt. Um die Argumente zu ändern, erzeugst du ein neuesCSSMathMax-Objekt.- Die Methode
max()gibt bei Argumenten mit gleicher Einheit direkt einenCSSUnitValuezurück, nicht zwingend einenCSSMathMax. Verlasse dich also nicht blind auf den Rückgabetyp.