CSSNumericValue: min()-Methode

Syntax

min()
min(number1)
min(number1, number2)
min(number1, number2, /* …, */ numberN)

Parameter

number1, …, numberN Optional

Entweder eine Zahl oder ein CSSNumericValue. Eine Zahl wird in einen CSSUnitValue mit der Einheit "number" umgewandelt. Daher wird 2 wie CSS.number(2) behandelt.

Rückgabewert

Ein CSSUnitValue, wenn das CSSNumericValue und alle übergebenen Werte dieselbe Einheit haben. Andernfalls ein CSSMathMin.

Ausnahmen

TypeError

Wird ausgelöst, wenn die Werte inkompatible Typen haben, beispielsweise eine Länge und eine Zeit.

Beschreibung

Wenn das CSSNumericValue und alle übergebenen Werte genau dieselbe Einheit haben, vergleicht die Methode sie und gibt den kleinsten Wert als einzelnen CSSUnitValue zurück. Beispielsweise gibt CSS.px(10).min(CSS.px(25)) den Wert 10px zurück.

Andernfalls gibt die Methode einen CSSMathMin zurück, der eine CSS-min()-Funktion darstellt und jeden Wert als eigenen Term beibehält. Der Browser bestimmt erst bei der Verwendung des Werts, welcher Term der kleinste ist. Welcher Wert beispielsweise kleiner ist, 100px oder 50%, hängt von der Größe des umgebenden Elements ab. Einheiten werden nicht umgerechnet. Deshalb ergibt auch der Vergleich einer Länge in cm mit einer Länge in in einen CSSMathMin, obwohl beides absolute Längeneinheiten sind.

Wenn das CSSNumericValue bereits ein CSSMathMin ist, werden die übergebenen Werte als zusätzliche Terme hinzugefügt, statt den vorhandenen CSSMathMin als einen Term in einen neuen aufzunehmen. Die Terme des Ergebnisses stehen in folgender Reihenfolge: zuerst das CSSNumericValue (oder, wenn es bereits ein CSSMathMin ist, dessen Terme), danach die übergebenen Werte in der Reihenfolge ihrer Übergabe.

Die Werte müssen vergleichbare Typen haben, beispielsweise zwei Längen oder eine Länge und einen Prozentwert. Der Vergleich einer Länge mit einer Zeit oder einer einfachen Zahl löst einen TypeError aus.

Beispiele

Den kleinsten Wert bei gleicher Einheit ermitteln

Wenn alle Werte dieselbe Einheit haben, ist das Ergebnis ein einzelner CSSUnitValue:

const smallest = CSS.px(10).min(CSS.px(25), CSS.px(5));
console.log(smallest.toString()); // "5px"

Werte mit unterschiedlichen Einheiten vergleichen

Wenn die Einheiten unterschiedlich sind, ist das Ergebnis ein CSSMathMin, selbst wenn sich die Werte in dieselbe Einheit umrechnen ließen:

const atMost = CSS.px(100).min(CSS.percent(50));
console.log(atMost.toString()); // "min(100px, 50%)"

const lengths = CSS.cm(1).min(CSS.in(0.393701));
console.log(lengths.toString()); // "min(1cm, 0.393701in)"

Nicht vergleichbare Werte vergleichen

Der Vergleich einer Länge mit einer Zeit löst einen TypeError aus:

try {
  CSS.px(1).min(CSS.s(1));
} catch (e) {
  console.log(e instanceof TypeError); // true
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSNumericValue.max()
• CSSMathMin
• CSS-min()-Funktion
• CSS Typed OM verwenden