pow()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die pow() CSS Funktion ist eine Exponentialfunktion, die den Wert einer Basis zurückgibt, der auf die Potenz einer Zahl erhöht wird.

Die exp()-Funktion ist ein Spezialfall von pow(), bei dem der Basiswert die mathematische Konstante e ist.

Syntax

css

/* A <number> value */
width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */
width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */
width: calc(10px * pow(2, 10)); /* 10px * 1024 = 10240px */

Parameter

Die Funktion pow(base, number) akzeptiert zwei durch Kommas getrennte Werte als Parameter.

base: Eine Berechnung, die zu einem <number> aufgelöst wird und die Basis darstellt.
number: Eine Berechnung, die zu einem <number> aufgelöst wird und den Exponenten darstellt.

Rückgabewert

Gibt eine <number> zurück, die base^number darstellt, das heißt, base erhöht auf die Potenz von number.

Formale Syntax

<pow()> = 
  pow( <calc-sum> , <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Beispiele

Überschriften durch festen Faktor skalieren

Die pow()-Funktion kann nützlich für Strategien wie CSS Modular Scale sein, die alle Schriftgrößen auf einer Seite in einem festen Verhältnis zueinander beziehen.

HTML

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

CSS

css

h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}

Ergebnis

Spezifikationen

Specification
CSS Values and Units Module Level 4 # exponent-funcs