Signatur
Beschreibung
Die Schnittstelle CSSMathMin gehört zum CSS Typed Object Model (Houdini) und bildet einen CSS-Ausdruck wie min(300px, 50vw) als typisiertes Objekt ab. Sie erbt von CSSMathValue und damit von CSSNumericValue und CSSStyleValue. Die Eigenschaft operator hat bei ihr immer den Wert "min".
Die Argumente der Funktion stehen in der schreibgeschützten Eigenschaft values, einem CSSNumericArray. Darüber kannst du iterieren und jedes Element einzeln auswerten, statt einen CSS-String selbst zu zerlegen. Ausgewertet wird der Ausdruck nicht in JavaScript, sondern erst vom Browser beim Layout, weil Einheiten wie % oder vw nur im jeweiligen Kontext aufgelöst werden können.
Ein CSSMathMin-Objekt erhältst du auf drei Wegen:
- über den Konstruktor
new CSSMathMin(...values), - über
CSSNumericValue.prototype.min(), wenn sich die Einheiten nicht direkt vergleichen lassen, - beim Auslesen einer Eigenschaft mit
element.attributeStyleMap.get(), wenn dort einemin()-Funktion steht.
Mit attributeStyleMap.set() kannst du das Objekt direkt als Stilwert setzen. Das erspart dir das fehleranfällige Zusammensetzen von Strings.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $...values Pflicht | CSSNumberish (number | CSSNumericValue) | Ein oder mehrere numerische Werte, z. B. CSS.px(100) oder CSS.vw(50). Einfache Zahlen werden als einheitenlose Werte (number) behandelt. Alle Werte müssen zueinander passen, z. B. alle Längen. |
Rückgabewert
CSSMathMin-Objekt mit operator === "min" und den übergebenen Argumenten in values (CSSNumericArray).Beispiele
Instanz erzeugen und untersuchen
const breite = new CSSMathMin(CSS.px(600), CSS.vw(90));
console.log(breite.operator); // Art der Rechenoperation
console.log(breite.values.length); // Anzahl der Argumente
console.log(breite.toString()); // Serialisierung als CSS-Text
console.log(breite instanceof CSSMathValue);Responsive Breite per attributeStyleMap setzen
const karte = document.querySelector('.karte');
// entspricht: width: min(400px, 100%)
karte.attributeStyleMap.set(
'width',
new CSSMathMin(CSS.px(400), CSS.percent(100))
);
console.log(karte.style.width);min() über CSSNumericValue.prototype.min() erzeugen
// Gleiche Einheit: wird sofort ausgerechnet
const direkt = CSS.px(10).min(CSS.px(25));
console.log(direkt.toString(), direkt.constructor.name);
// Gemischte Einheiten: Ergebnis ist ein CSSMathMin
const gemischt = CSS.rem(2).min(CSS.vh(5), CSS.px(40));
console.log(gemischt.toString(), gemischt.constructor.name);Vorhandenen min()-Ausdruck auslesen und auswerten
const box = document.querySelector('.box');
box.style.padding = 'min(2rem, 5vw)';
const wert = box.attributeStyleMap.get('padding-top');
if (wert instanceof CSSMathMin) {
for (const teil of wert.values) {
console.log(`${teil.value} ${teil.unit}`);
}
}// Wichtig · Fallstricke
Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome und Edge ab Version 66) und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Verfügbarkeit mit 'CSSMathMin' in window oder 'attributeStyleMap' in HTMLElement.prototype und setze sonst den CSS-String direkt, z. B. el.style.width = 'min(400px, 100%)'.
- Fehler im Konstruktor: Ohne Argumente (
new CSSMathMin()) wird einSyntaxErrorgeworfen. Passen die Typen nicht zusammen, z. B.CSS.px(1)mitCSS.s(1)oder eine Länge mit einer einheitenlosen Zahl, gibt es einenTypeError. - Keine Auswertung in JavaScript:
CSSMathMinliefert kein berechnetes Ergebnis in Pixeln. Den tatsächlich berechneten Wert bekommst du überelement.computedStyleMap().get(...)odergetComputedStyle(). - Mögliche Vereinfachung:
CSSNumericValue.prototype.min()gibt bei gleichen Einheiten direkt einCSSUnitValuezurück, keinCSSMathMin. Prüfe deshalb mitinstanceof, welcher Typ vorliegt. valuesist schreibgeschützt. Für andere Argumente erzeugst du ein neues Objekt.