CSSNumericValue.max() — Methode · JavaScript-Referenz

Signatur

CSSNumericValue.prototype.max(...values)

Beschreibung

Die Methode max() gehört zum CSS Typed Object Model (Houdini). Sie vergleicht den Wert, auf dem sie aufgerufen wird, mit beliebig vielen weiteren numerischen Werten und gibt den größten zurück. Damit lässt sich die CSS-Funktion max() direkt in JavaScript nachbilden, ohne Zeichenketten zusammenzusetzen.

Das Ergebnis hängt von den Einheiten ab:

Sind alle Werte CSSUnitValue-Objekte mit derselben Einheit, rechnet der Browser das Maximum sofort aus und gibt einen neuen CSSUnitValue zurück (z. B. 20px).
Haben die Werte unterschiedliche, aber kompatible Einheiten (z. B. px und vw oder %), wird nichts ausgerechnet. Stattdessen entsteht ein CSSMathMax-Objekt, das zu max(10px, 5vw) serialisiert wird. Der Browser löst es erst beim Layout auf.
Sind die Einheiten inkompatibel (z. B. Länge und Zeit), wird ein TypeError geworfen.

In der Praxis eignet sich max() für Mindestgrößen in responsiven Layouts, etwa wenn ein Element mindestens 200 px, bei großen Viewports aber 50 % breit sein soll. Das Ergebnis kann direkt an element.attributeStyleMap.set() übergeben werden.

Parameter

Name	Typ	Default	Beschreibung
$...values	CSSNumericValue \| number		Beliebig viele Werte, die mit dem aktuellen Wert verglichen werden. Einfache Zahlen werden intern wie `CSS.number(n)` behandelt, sind also einheitenlos.

Rückgabewert

Typ

CSSUnitValue | CSSMathMax

Beschreibung

Ein CSSUnitValue mit dem größten Wert, wenn alle Werte dieselbe Einheit haben, sonst ein CSSMathMax, das den aktuellen Wert und alle Argumente enthält. Der Ausgangswert selbst wird nicht verändert.

Beispiele

Maximum bei gleicher Einheit

const groesster = CSS.px(10).max(CSS.px(20), CSS.px(5));

console.log(groesster.constructor.name);
console.log(groesster.value, groesster.unit);
console.log(groesster.toString());

CSSUnitValue 20 "px" 20px

Gemischte Einheiten ergeben einen CSSMathMax

const breite = CSS.px(200).max(CSS.percent(50));

console.log(breite instanceof CSSMathMax);
console.log(breite.toString());
// Die einzelnen Operanden auslesen
console.log([...breite.values].map(String));

true max(200px, 50%) ["200px", "50%"]

Responsive Mindestbreite direkt setzen

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

// Mindestens 280px, bei breiten Fenstern 30vw
karte.attributeStyleMap.set('width', CSS.px(280).max(CSS.vw(30)));

console.log(karte.attributeStyleMap.get('width').toString());

max(280px, 30vw)

Inkompatible Einheiten abfangen

try {
  CSS.px(10).max(CSS.s(2));
} catch (err) {
  console.log(err.name);
}

// Einheitenlose Zahlen funktionieren untereinander
console.log(CSS.number(3).max(7, 1.5).toString());

TypeError 7

// Wichtig · Fallstricke

Keine Umrechnung zwischen Einheiten: Auch umrechenbare absolute Einheiten wie CSS.in(1) und CSS.px(96) werden nicht verglichen, sondern ergeben einen CSSMathMax. Wer einen konkreten Wert braucht, muss vorher mit .to('px') umrechnen.
Nackte Zahlen: CSS.px(10).max(20) wirft einen TypeError, weil eine einheitenlose Zahl nicht zu einer Länge passt. Verwende CSS.px(20).
Unveränderlich: Die Methode verändert den Ausgangswert nicht, sondern gibt immer ein neues Objekt zurück.
Browser-Kompatibilität: CSS Typed OM gibt es in Chromium-Browsern (Chrome/Edge 66+) und in Safari ab 16.4. Firefox unterstützt es nicht. Vorher mit if ('CSSNumericValue' in window) prüfen und notfalls eine Zeichenkette wie 'max(200px, 50%)' über element.style setzen.

Siehe auch

CSSNumericValue.min() CSSNumericValue.add() CSSNumericValue.to() CSSMathMax CSSUnitValue CSSFontFeatureValuesMap.get()