Fonction CSS `pow()`

Baseline 2023

Nouvellement disponible

Depuis December 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

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));
}