Signatur
Beschreibung
Die Eigenschaft value eines CSSMathClamp-Objekts steht für das mittlere Argument der CSS-Funktion clamp(MIN, VAL, MAX), also den bevorzugten Wert. Er gilt, solange er zwischen der Untergrenze (lower) und der Obergrenze (upper) liegt. Zurückgegeben wird eine Instanz von CSSNumericValue, zum Beispiel ein CSSUnitValue wie 50vw oder ein zusammengesetzter Ausdruck wie CSSMathSum für calc(1rem + 2vw).
Die Eigenschaft ist nützlich, wenn du flüssige Größen – etwa responsive Schriftgrößen mit clamp() – per Skript auswerten, prüfen oder umbauen willst, ohne CSS-Strings selbst zu zerlegen. Mit dem zurückgegebenen Objekt kannst du zum Beispiel über .unit und .value (bei CSSUnitValue) die Einheit und die Zahl auslesen oder mit .to() bzw. .add() weiterrechnen.
Die Eigenschaft ist schreibgeschützt. Willst du einen anderen bevorzugten Wert, erzeugst du ein neues Objekt mit new CSSMathClamp(lower, value, upper) und weist es über attributeStyleMap.set() zu.
Rückgabewert
clamp()-Ausdrucks, z. B. ein CSSUnitValue oder ein CSSMathValue wie CSSMathSum.Beispiele
CSSMathClamp erzeugen und bevorzugten Wert auslesen
const clamp = new CSSMathClamp(CSS.px(100), CSS.vw(50), CSS.px(800));
console.log(clamp.value.toString());
console.log(clamp.value.value, clamp.value.unit);
console.log(clamp.toString());Zusammengesetzter bevorzugter Wert
// Bevorzugter Wert: calc(1rem + 2vw)
const preferred = CSS.rem(1).add(CSS.vw(2));
const fontSize = new CSSMathClamp(CSS.rem(1), preferred, CSS.rem(3));
console.log(fontSize.value instanceof CSSMathSum);
console.log(fontSize.value.toString());Bevorzugten Wert ändern (neues Objekt statt Zuweisung)
const heading = document.querySelector('h1');
const current = new CSSMathClamp(CSS.rem(1.5), CSS.vw(4), CSS.rem(3));
// current.value = CSS.vw(5); // hätte keine Wirkung, weil value schreibgeschützt ist
const updated = new CSSMathClamp(current.lower, CSS.vw(5), current.upper);
heading.attributeStyleMap.set('font-size', updated);
console.log(heading.attributeStyleMap.get('font-size').toString());Wert aus dem Stil lesen mit Feature-Prüfung
const box = document.querySelector('.box');
box.style.width = 'clamp(200px, 60%, 900px)';
const width = box.attributeStyleMap.get('width');
if ('CSSMathClamp' in window && width instanceof CSSMathClamp) {
console.log('Bevorzugt:', width.value.toString());
} else {
console.log('Kein CSSMathClamp verfügbar:', String(width));
}// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
valuewird im nicht-strikten Modus einfach ignoriert und löst im Strict Mode einenTypeErroraus. Für Änderungen erzeugst du ein neuesCSSMathClamp. - Rückgabetyp prüfen:
valueist nicht immer einCSSUnitValue. Beicalc()-Ausdrücken bekommst du Unterklassen vonCSSMathValue, die keine Eigenschaften.value/.unithaben. Prüfe den Typ deshalb vorher mitinstanceof. - Kein berechneter Endwert:
valueliefert das Argument so, wie es angegeben wurde, und nicht den tatsächlich angewandten, begrenzten Wert. Den bekommst du übergetComputedStyle()bzw.computedStyleMap()– je nach Eigenschaft und Browser. - Einheiten müssen zusammenpassen: Der Konstruktor wirft einen
TypeError, wenn sich die Typen vonlower,valueunduppernicht kombinieren lassen (z. B.pxunddeggemischt). - Browser-Kompatibilität:
CSSMathClampgehört zum CSS Typed OM und wird nur eingeschränkt unterstützt (vor allem Chromium-basierte Browser; Firefox unterstützt das Typed OM bisher nicht). Manche Browser gebenclamp()-Werte auch alsCSSUnparsedValueoderCSSStyleValuezurück. Nutze deshalb eine Feature-Prüfung ('CSSMathClamp' in window).