CSSNumericValue.min() — Methode · JavaScript-Referenz

Signatur

CSSNumericValue.prototype.min(...values)

Beschreibung

Die Methode min() gehört zur Schnittstelle CSSNumericValue aus dem CSS Typed Object Model (Houdini). Sie ist das objektorientierte Gegenstück zur CSS-Funktion min(). Sie vergleicht den Wert, auf dem sie aufgerufen wird, mit allen übergebenen Werten.

Das Ergebnis hängt von den Einheiten ab:

Sind this und alle Argumente CSSUnitValue-Objekte mit genau derselben Einheit, wird sofort gerechnet. Du bekommst einen neuen CSSUnitValue mit dem kleinsten Wert zurück, z. B. CSS.px(3).
Andernfalls wird ein CSSMathMin-Objekt zurückgegeben. Das gilt bei gemischten Einheiten wie px und vw und auch bei eigentlich umrechenbaren Einheiten wie px und cm. Das Objekt steht für den Ausdruck min(…), den der Browser erst beim Layout auswertet.

Typische Einsatzfälle sind responsive Größen, die du per JavaScript über element.attributeStyleMap setzt, etwa „höchstens 600px, aber nie breiter als 90vw“. Das geht ohne String-Verkettung und ist vom Typ her sicher.

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	CSSNumericValue \| number		Ein oder mehrere Werte, die mit dem aktuellen Wert verglichen werden. Reine Zahlen werden intern in `CSSUnitValue` mit der Einheit `"number"` umgewandelt. Alle Werte müssen einen kompatiblen Typ haben, z. B. alle Längen oder alle Winkel.

Rückgabewert

Typ

CSSUnitValue | CSSMathMin

Beschreibung

Ein CSSUnitValue mit dem kleinsten Wert, wenn alle Operanden dieselbe Einheit haben. Sonst ein CSSMathMin, dessen Eigenschaft values (ein CSSNumericArray) alle Operanden enthält.

Beispiele

Gleiche Einheit: Ergebnis wird direkt berechnet

const kleinster = CSS.px(12).min(CSS.px(8), CSS.px(20));

console.log(kleinster instanceof CSSUnitValue); // true
console.log(kleinster.value, kleinster.unit);
console.log(kleinster.toString());

true 8 "px" 8px

Gemischte Einheiten: CSSMathMin-Ausdruck

const ausdruck = CSS.percent(50).min(CSS.vw(80), CSS.px(600));

console.log(ausdruck.constructor.name); // CSSMathMin
console.log(ausdruck.operator);
console.log(ausdruck.values.length);
console.log(ausdruck.toString());

CSSMathMin "min" 3 min(50%, 80vw, 600px)

Responsive Breite über attributeStyleMap setzen

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

// Höchstens 600px, aber nie breiter als 90 % der Viewport-Breite
const breite = CSS.px(600).min(CSS.vw(90));
karte.attributeStyleMap.set('width', breite);

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

min(600px, 90vw) min(600px, 90vw)

Inkompatible Typen abfangen und Feature-Erkennung

if (!('CSSNumericValue' in window)) {
  console.warn('CSS Typed OM wird nicht unterstützt');
} else {
  try {
    // Länge und Winkel lassen sich nicht vergleichen
    CSS.px(10).min(CSS.deg(45));
  } catch (err) {
    console.log(err.name);
  }
}

TypeError

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es nur in Chromium-Browsern (Chrome und Edge ab 66) und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Verfügbarkeit daher vorher, z. B. mit 'CSSNumericValue' in window oder CSS.px, und sieh einen Fallback über element.style.width = 'min(600px, 90vw)' vor.
Keine Umrechnung von Einheiten: Auch umrechenbare Einheiten wie CSS.px(10).min(CSS.cm(1)) ergeben einen CSSMathMin und keinen berechneten CSSUnitValue. Wenn du ein konkretes Ergebnis brauchst, wandle die Werte vorher mit to('px') um.
TypeError bei inkompatiblen Typen: Du kannst nicht Länge mit Winkel oder Länge mit einer reinen Zahl mischen. Ein Aufruf wie CSS.px(5).min(3) wirft ebenfalls einen Fehler, weil 3 vom Typ number ist.
Die Methode verändert den ursprünglichen Wert nicht, sondern gibt immer ein neues Objekt zurück.
Prozentwerte werden erst im Layout-Kontext aufgelöst. Ob min(50%, 80vw) sinnvoll ist, hängt davon ab, auf welche Eigenschaft du den Wert anwendest.

Siehe auch

CSSFontFeatureValuesMap.keys() CSSNumericValue.div() CSSNumericValue.max() CSSNumericValue.mul() CSSNumericValue.add()