Fonction CSS `pow()`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis décembre 2023.

En savoir plus
Voir la compatibilité complète

La fonction CSS pow() est une fonction exponentielle qui renvoie la valeur d'une base élevée à la puissance d'un nombre.

La fonction exp() est un cas particulier de pow() où la valeur de la base est la constante mathématique e.

Syntaxe

css

/* Valeur de type <number> */
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 */

Paramètres

La fonction pow(base, number) accepte deux valeurs séparées par des virgules comme paramètres.

base: Un calcul qui se résout en un nombre (<number>), représentant la base.
number: Un calcul qui se résout en un nombre (<number>), représentant l'exposant.

Valeur de retour

Retourne un nombre (<number>) représentant base^number, c'est-à-dire base élevé à la puissance number.

Syntaxe formelle

<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

Exemples

Mise à l'échelle des titres par un ratio fixe

La fonction pow() peut être utile pour des stratégies comme le Modular Scale CSS, qui relie toutes les tailles de police d'une page entre elles par un ratio fixe.

HTML

html

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 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));
}