new CSSMathMin() — Methode · JavaScript-Referenz

Signatur

new CSSMathMin(...values)

Beschreibung

Der Konstruktor CSSMathMin() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein Objekt, das der CSS-Funktion min() entspricht, zum Beispiel min(100px, 50vw). Der Browser wertet den Ausdruck erst beim Rendern aus. Deshalb darf man Einheiten mischen, die sich erst im Layout ineinander umrechnen lassen, etwa px und vw.

Man verwendet ihn, wenn man min()-Ausdrücke im Code zusammenbauen will, ohne Zeichenketten zu verketten. Das Ergebnis kann direkt an element.attributeStyleMap.set() übergeben werden. Der Browser prüft dabei die Typen, sodass keine fehlerhaften Strings entstehen.

Jedes Argument ist ein CSSNumberish, also eine einfache Zahl oder ein CSSNumericValue (z. B. CSS.px(10) oder ein weiterer CSSMathValue). Die Werte stehen danach in der Eigenschaft values als CSSNumericArray. Die Eigenschaft operator ist immer "min".

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	number \| CSSNumericValue		Ein oder mehrere Werte, deren kleinster verwendet werden soll. Zahlen werden intern zu `CSSUnitValue` mit der Einheit `number` umgewandelt. Alle Werte müssen kompatible Typen haben, z. B. nur Längen oder nur Winkel.

Rückgabewert

Typ

CSSMathMin

Beschreibung

Ein neues CSSMathMin-Objekt. values enthält die übergebenen Werte, operator ist "min".

Beispiele

min()-Ausdruck erzeugen und untersuchen

const breite = new CSSMathMin(CSS.px(600), CSS.vw(90));

console.log(breite.toString());
console.log(breite.operator);
console.log(breite.values.length);
console.log(breite.values[1].unit);

min(600px, 90vw) min 2 vw

Responsive Breite typsicher setzen

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

// Entspricht: width: min(40rem, 100% - 2rem)
const maxBreite = new CSSMathMin(
  CSS.rem(40),
  new CSSMathSum(CSS.percent(100), CSS.rem(-2))
);

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

min(40rem, calc(100% + -2rem))

Fehlerbehandlung bei unpassenden Typen

try {
  // Länge und Winkel sind nicht kompatibel
  new CSSMathMin(CSS.px(10), CSS.deg(45));
} catch (err) {
  console.log(err.name);
}

try {
  new CSSMathMin(); // keine Argumente
} catch (err) {
  console.log(err.name);
}

TypeError SyntaxError

Kurzform über CSSNumericValue.min()

// Gleiche Einheit: wird sofort zu einem Einzelwert ausgerechnet
console.log(CSS.px(10).min(CSS.px(5)).toString());

// Gemischte Einheiten: ergibt ein CSSMathMin
const gemischt = CSS.px(10).min(CSS.em(2));
console.log(gemischt instanceof CSSMathMin, gemischt.toString());

5px true min(10px, 2em)

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (ab Chrome 66 / Edge 79) und in Safari ab 16.4. Firefox unterstützt es nicht. Vorher prüfen, z. B. mit if ('CSSMathMin' in window), und sonst auf element.style.width = 'min(...)' ausweichen.
Ohne Argumente wirft der Konstruktor einen SyntaxError. Bei nicht kompatiblen Typen (z. B. px mit deg) wirft er einen TypeError.
Der Konstruktor rechnet nichts aus und vereinfacht nichts, auch nicht bei gleichen Einheiten. Wer schon im Code vereinfachen will, nimmt CSSNumericValue.prototype.min().
Die Ausgabe von toString() kann von der ursprünglichen Schreibweise abweichen. Subtraktionen erscheinen zum Beispiel als Addition mit negativem Wert.
Den kleinsten Wert erfährt man erst über computedStyleMap(). Das Objekt selbst enthält nur den Ausdruck.

Siehe auch

CSSMathMin CSSMathMax CSSMathSum CSSMathValue CSSNumericValue.prototype.min() CSSNumericArray