CSSMathClamp.lower — Eigenschaft · JavaScript-Referenz

Signatur

get CSSMathClamp.prototype.lower

Beschreibung

Die Eigenschaft lower der Schnittstelle CSSMathClamp liefert das erste Argument einer CSS-Funktion clamp(MIN, VAL, MAX), also die untere Grenze. Der Wert ist ein CSSNumericValue. Meist ist das ein CSSUnitValue wie 100px. Es kann aber auch ein verschachtelter Rechenausdruck sein, etwa CSSMathSum für calc(1rem + 2px).

Die Eigenschaft ist Teil des CSS Typed Object Model (Houdini). Mit ihr liest du die Grenzen eines clamp()-Werts als Objekt aus und musst keine Zeichenketten zerlegen. Das hilft zum Beispiel bei Design-Tools, Stil-Prüfungen oder Laufzeitlogik, die mit dem Mindestwert weiterrechnet (z. B. lower.to('px')).

lower ist schreibgeschützt. Um die untere Grenze zu ändern, erzeugst du ein neues CSSMathClamp-Objekt mit new CSSMathClamp(lower, value, upper) und weist es zum Beispiel über element.attributeStyleMap.set() zu.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der Mindestwert des clamp()-Ausdrucks, z. B. ein CSSUnitValue (value + unit) oder ein CSSMathValue wie CSSMathSum.

Beispiele

Mindestwert eines selbst erzeugten clamp() auslesen

const clamp = new CSSMathClamp(CSS.px(100), CSS.vw(50), CSS.px(800));

console.log(clamp.toString());
console.log(clamp.lower.toString());
console.log(clamp.lower.value, clamp.lower.unit);

clamp(100px, 50vw, 800px) 100px 100 px

Untere Grenze ändern – neues Objekt statt Zuweisung

const box = document.querySelector('.box');
const clamp = new CSSMathClamp(CSS.rem(1), CSS.vw(2.5), CSS.rem(2));

// Mindestwert verdoppeln, die anderen Werte bleiben gleich
const neu = new CSSMathClamp(
  clamp.lower.mul(2),
  clamp.value,
  clamp.upper
);

box.attributeStyleMap.set('font-size', neu);
console.log(neu.lower.toString());

2rem

Verschachtelten Mindestwert erkennen und umrechnen

const clamp = new CSSMathClamp(
  new CSSMathSum(CSS.px(10), CSS.px(6)),
  CSS.percent(50),
  CSS.px(400)
);

const { lower } = clamp;
if (lower instanceof CSSUnitValue) {
  console.log('Einfacher Wert:', lower.toString());
} else {
  console.log('Ausdruck:', lower.toString());
  // Nur möglich, wenn alle Teile in px umrechenbar sind
  console.log('In px:', lower.to('px').toString());
}

Ausdruck: calc(10px + 6px) In px: 16px

Funktionsprüfung vor der Nutzung

const unterstuetzt = typeof window.CSSMathClamp === 'function';

if (unterstuetzt) {
  const c = new CSSMathClamp(CSS.px(0), CSS.px(50), CSS.px(100));
  console.log('lower =', c.lower.toString());
} else {
  console.log('CSSMathClamp wird nicht unterstützt');
}

lower = 0px

// Wichtig · Fallstricke

Schreibgeschützt: clamp.lower = CSS.px(5) wird im nicht-strikten Modus einfach ignoriert. Im strikten Modus, also auch in ES-Modulen, wirft die Zuweisung einen TypeError. Lege stattdessen ein neues CSSMathClamp an.
Browser-Unterstützung: CSSMathClamp gibt es derzeit nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Firefox unterstützt das CSS Typed OM bisher nicht. Prüfe die Unterstützung daher immer vorab, z. B. mit 'CSSMathClamp' in window.
Typen müssen passen: Der Konstruktor wirft einen TypeError, wenn lower, value und upper nicht zueinander passen, z. B. eine Länge und ein Winkel.
Kein automatisches Auflösen: lower liefert den Wert so, wie er angegeben wurde. Relative Einheiten wie rem oder vw werden nicht in Pixel umgerechnet. to('px') funktioniert nur zwischen absoluten, umrechenbaren Einheiten.
Ob computedStyleMap() einen clamp()-Wert als CSSMathClamp zurückgibt, hängt von der Eigenschaft und vom Browser ab. Berechnete Werte kommen oft schon aufgelöst als CSSUnitValue zurück.

Siehe auch

CSSMathClamp.upper CSSMathClamp.value CSSMathMax.values CSSMathMin.values CSSMathSum.values