new CSSMathClamp() — Methode · JavaScript-Referenz

Signatur

new CSSMathClamp(lower, value, upper)

Beschreibung

Der Konstruktor CSSMathClamp() gehört zum CSS Typed Object Model (Houdini). Er erzeugt ein typisiertes Objekt für die CSS-Funktion clamp(). Diese begrenzt einen bevorzugten Wert auf einen Bereich zwischen einer Unter- und einer Obergrenze. Anders als bei einem String wie "clamp(1rem, 2.5vw, 2rem)" arbeitest du hier mit echten Objekten. Deren Einzelteile kannst du über die Eigenschaften lower, value und upper lesen, und der Browser prüft sie beim Erzeugen.

Die drei Argumente sind jeweils vom Typ CSSNumberish: Das ist entweder eine einfache Zahl oder ein CSSNumericValue, etwa aus CSS.px(), CSS.rem(), CSS.vw() oder aus einem anderen mathematischen Ausdruck wie CSSMathSum. Alle drei Werte müssen zueinander passende Typen haben (zum Beispiel alle Längen). Mischst du etwa Längen und Winkel, wirft der Konstruktor einen TypeError.

Typische Einsatzfälle sind flüssige Typografie und responsive Abstände, die per JavaScript über element.attributeStyleMap.set() gesetzt werden, ohne Strings zusammenzubauen. Die Eigenschaft operator des Objekts hat immer den Wert "clamp". toString() gibt die serialisierte CSS-Schreibweise zurück.

Parameter

Name	Typ	Beschreibung
$lower Pflicht	number \| CSSNumericValue	Untergrenze (Minimum) des Bereichs, entspricht dem ersten Argument von `clamp()`. Eine einfache Zahl wird in einen `CSSUnitValue` mit der Einheit `"number"` umgewandelt.
$value Pflicht	number \| CSSNumericValue	Bevorzugter Wert, zum Beispiel `CSS.vw(5)`. Er wird verwendet, solange er zwischen `lower` und `upper` liegt.
$upper Pflicht	number \| CSSNumericValue	Obergrenze (Maximum) des Bereichs, entspricht dem dritten Argument von `clamp()`.

Rückgabewert

Typ

CSSMathClamp

Beschreibung

Ein neues CSSMathClamp-Objekt mit den schreibgeschützten Eigenschaften lower, value, upper und operator (immer "clamp").

Beispiele

Objekt erzeugen und auslesen

const clamp = new CSSMathClamp(CSS.px(16), CSS.vw(5), CSS.px(32));

console.log(clamp.operator);          // Art der Operation
console.log(clamp.lower.toString());  // Untergrenze
console.log(clamp.value.toString());  // bevorzugter Wert
console.log(clamp.upper.toString());  // Obergrenze
console.log(clamp.toString());        // serialisiertes CSS

clamp 16px 5vw 32px clamp(16px, 5vw, 32px)

Flüssige Schriftgröße per attributeStyleMap setzen

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

// Bevorzugter Wert: 1rem + 2vw, begrenzt auf 1.5rem bis 3rem
const preferred = new CSSMathSum(CSS.rem(1), CSS.vw(2));
const fontSize = new CSSMathClamp(CSS.rem(1.5), preferred, CSS.rem(3));

heading.attributeStyleMap.set('font-size', fontSize);
console.log(heading.attributeStyleMap.get('font-size').toString());

clamp(1.5rem, 1rem + 2vw, 3rem)

Funktionsprüfung mit Fallback als String

const setPadding = (el) => {
  if ('CSSMathClamp' in window && el.attributeStyleMap) {
    el.attributeStyleMap.set(
      'padding',
      new CSSMathClamp(CSS.px(8), CSS.vw(3), CSS.px(24))
    );
  } else {
    // Fallback für Browser ohne Typed OM (z. B. Firefox)
    el.style.padding = 'clamp(8px, 3vw, 24px)';
  }
};

setPadding(document.querySelector('.card'));

TypeError bei unverträglichen Typen abfangen

try {
  // Länge und Winkel passen nicht zusammen
  new CSSMathClamp(CSS.px(10), CSS.deg(45), CSS.px(50));
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Browser-Unterstützung: CSSMathClamp kam erst deutlich nach den übrigen Typed-OM-Klassen hinzu und ist nur eingeschränkt verfügbar. Firefox unterstützt das CSS Typed OM bisher gar nicht. Prüfe deshalb vorher mit 'CSSMathClamp' in window und halte einen String-Fallback über element.style bereit.
Typverträglichkeit: Alle drei Argumente müssen einen gemeinsamen Typ ergeben. Längen dürfen dabei gemischt werden, etwa px, rem und vw. Längen mit Winkeln oder mit reinen Zahlen zu kombinieren, löst einen TypeError aus. Achtung: Eine einfache Zahl wie 16 gilt als einheitenlos und nicht als 16px.
Keine Bereichsprüfung: Der Konstruktor prüft nicht, ob lower kleiner als upper ist. Wie in CSS gilt: Ist das Minimum größer als das Maximum, setzt sich das Minimum durch.
Die Eigenschaften lower, value und upper sind schreibgeschützt. Für andere Werte erzeugst du ein neues Objekt.
Beim Auslesen berechneter Stile (computedStyleMap()) wird clamp() meist schon zu einem festen Wert aufgelöst. Ein CSSMathClamp bekommst du dann nicht zurück.

Siehe auch

CSSMathClamp CSSMathValue CSSMathMin CSSMathMax CSSMathSum CSSNumericValue