CSSMathClamp.upper — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathClamp.upper

Beschreibung

Die Eigenschaft upper gehört zur Schnittstelle CSSMathClamp aus dem CSS Typed Object Model. Ein CSSMathClamp-Objekt steht für die CSS-Funktion clamp(MIN, WERT, MAX); upper gibt dabei das dritte Argument zurück, also die Obergrenze, über die der berechnete Wert nicht hinauswachsen darf.

Der Rückgabewert ist immer ein CSSNumericValue. Das kann ein einfacher CSSUnitValue sein (z. B. 32px mit den Eigenschaften value und unit) oder ein zusammengesetzter Ausdruck wie CSSMathSum, wenn die Obergrenze selbst eine Berechnung ist (etwa calc(20px + 1rem)).

Praktisch nützlich ist upper, wenn man fluide Typografie oder responsive Abstände per JavaScript prüft, protokolliert oder daraus neue Werte ableitet – ohne den CSS-Text mit regulären Ausdrücken zerlegen zu müssen. Die Eigenschaft ist schreibgeschützt. Um die Obergrenze zu ändern, erzeugt man ein neues CSSMathClamp-Objekt und weist es zu.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Die Obergrenze des clamp()-Ausdrucks, meist ein CSSUnitValue, bei Berechnungen auch ein CSSMathValue (z. B. CSSMathSum).

Beispiele

Obergrenze eines selbst erzeugten clamp() auslesen

// clamp(16px, 4vw, 32px) als Typed-OM-Objekt
const fluid = new CSSMathClamp(CSS.px(16), CSS.vw(4), CSS.px(32));

const max = fluid.upper;
console.log(max.toString());
console.log(max.value, max.unit);
console.log(fluid.toString());

32px 32 "px" clamp(16px, 4vw, 32px)

Berechnete Obergrenze (CSSMathSum)

const upper = CSS.px(20).add(CSS.rem(1));
const spacing = new CSSMathClamp(CSS.px(8), CSS.vw(2), upper);

console.log(spacing.upper instanceof CSSMathSum);
console.log(spacing.upper.toString());

true calc(20px + 1rem)

Obergrenze für ein Element anheben und neu setzen

const heading = document.querySelector('h1');

if ('CSSMathClamp' in window && heading.attributeStyleMap) {
  const current = new CSSMathClamp(CSS.rem(1.5), CSS.vw(5), CSS.rem(3));

  // upper ist schreibgeschützt – daher ein neues Objekt erzeugen
  const bigger = new CSSMathClamp(
    current.lower,
    current.value,
    current.upper.mul(1.5)
  );

  heading.attributeStyleMap.set('font-size', bigger);
  console.log(bigger.upper.toString());
} else {
  console.log('CSS Typed OM / CSSMathClamp nicht verfügbar');
}

4.5rem

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie clamp.upper = CSS.px(40) wird außerhalb des Strict Mode stillschweigend ignoriert. Im Strict Mode (z. B. in ES-Modulen) löst sie einen TypeError aus. Für eine neue Obergrenze erzeugt man ein neues CSSMathClamp.
Browser-Unterstützung: CSSMathClamp gehört zum CSS Typed OM und wird nicht überall unterstützt. Firefox bietet das Typed OM bisher nicht an. Deshalb vorher per Feature-Erkennung prüfen, etwa mit 'CSSMathClamp' in window.
Berechnete Werte: element.computedStyleMap() löst clamp() in der Regel zu einem festen Wert auf (z. B. CSSUnitValue in px). Ein CSSMathClamp mit upper erhält man daher eher aus deklarierten Werten (attributeStyleMap) oder aus selbst erzeugten Objekten.
Typ prüfen: Ob upper ein CSSUnitValue ist, sollte man nicht einfach voraussetzen. Vor dem Zugriff auf .value oder .unit daher mit instanceof CSSUnitValue prüfen.
Der Konstruktor wirft einen TypeError, wenn die Typen von lower, value und upper nicht zueinander passen (z. B. px und deg).

Siehe auch

CSSMathClamp.lower CSSMathClamp.value CSSMathMax.values CSSMathSum.values CSSMathMin.values