CSSMathMax

Konstruktor

CSSMathMax()

Erstellt ein neues CSSMathMax-Objekt.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, CSSMathValue.

CSSMathMax.values Schreibgeschtzt

Gibt ein CSSNumericArray-Objekt zurck, das eines oder mehrere CSSNumericValue-Objekte enthlt.

Statische Methoden

Erbt auch Methoden von seiner Elternschnittstelle, CSSMathValue.

Instanz-Methoden

Erbt auch Methoden von seiner Elternschnittstelle, CSSMathValue.

Beschreibung

Die CSS max()-Funktion nimmt einen oder mehrere kommagetrennte Werte als Argumente und gibt den grten von ihnen zurck.

Wenn alle Argumente absolute Werte sind, wie beispielsweise Pixel-Lngen, wird max() zur Analysezeit in einen einzelnen Wert aufgelst, der im CSS Typed Object Model als CSSUnitValue dargestellt wird. Wenn der max()-Ausdruck zur Analysezeit nicht in einen einzelnen Wert aufgelst werden kann (z.B. weil eines seiner Argumente eine relative Einheit wie vw oder % verwendet), wird die Funktion als CSSMathMax-Objekt dargestellt, und die Argumente, die an max() (oder an den CSSMathMax()-Konstruktor) bergeben werden, werden als values-Eigenschaft angezeigt.

Beachten Sie, dass CSSMathMax die max()-Funktion reprsentiert, nicht deren aufgelsten Wert. Um den Wert einer Eigenschaft unter Verwendung von max() zu bestimmen, mssen Sie ihren berechneten Stil lesen (zum Beispiel mit getComputedStyle()).

Beispiele

Grundlegende Verwendung

Der folgende Code erstellt eine CSSMathMax-Instanz aus drei Werten und liest dann deren operator- und values-Eigenschaften aus.

const max = new CSSMathMax(CSS.px(10), CSS.em(5), CSS.percent(50));

console.log(max.constructor.name); // "CSSMathMax"
console.log(max.operator); // 'max'
console.log(max.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, 2: CSSUnitValue, length: 3}
console.log(max.values[0]); // CSSUnitValue {value: 10, unit: "px"}

max()-Darstellungen

Dieses Beispiel zeigt, wie max() durch einen CSSUnitValue oder einen CSSMathMax dargestellt wird, abhngig davon, ob alle Argumente absolute Werte sind.

HTML

<div id="demoBox">Text</div>

<pre id="log"></pre>

CSS

width wird mit einem max() festgelegt, dessen Argumente alle absolute Lngen sind, sodass der Browser es sofort in einen einzelnen festen Wert auflsen kann. font-size wird mit einem max() festgelegt, bei dem ein Argument die relative Einheit vw verwendet, sodass der Browser es erst beim Layout auflsen kann (dies wird durch ein CSSMathMax dargestellt).

#demoBox {
  width: max(10px, 50px);
  font-size: max(1rem, 5vw);
}

#log {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

Zuerst finden wir die Stilregel des Demokastens und lesen seine width- und font-size-Werte mit styleMap.

const demoBox = document.querySelector("#demoBox");

const rules = document.getElementById("css-output").sheet.cssRules;
const rule = [...rules].find((r) => r.selectorText === "#demoBox");
const styleMap = rule.styleMap;
const width = styleMap.get("width");
const fontSize = styleMap.get("font-size");

Wir protokollieren dann den Typ und Wert der Reprsentationen des CSS Typed OM, gefolgt von den berechneten (aufgelsten) Werten.

log("width");
log(` type: ${width.constructor.name}`);
log(` value: ${width}`);
log(` resolved: ${getComputedStyle(demoBox).width}`);

log("\nfont-size");
log(` type: ${fontSize.constructor.name}`);
log(` values: [${[...fontSize.values].join(", ")}]`);
log(` resolved: ${getComputedStyle(demoBox).fontSize}`);

Ergebnis

width wird durch ein CSSUnitValue-Objekt dargestellt, dessen Wert mit der aufgelsten Breite bereinstimmt. font-size wird durch ein CSSMathMax-Objekt dargestellt, das die ursprnglichen Operanden der max()-Funktion anzeigt.

Spezifikationen

Browser-Kompatibilitt