Fonction CSS `sqrt()`

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 sqrt() est une fonction exponentielle qui retourne la racine carrée d'un nombre.

La fonction pow(x, 0.5) est équivalente à sqrt(x).

Syntaxe

css

/* Valeur de type <number> */
width: calc(100px * sqrt(9)); /*  300px */
width: calc(100px * sqrt(25)); /*  500px */
width: calc(100px * sqrt(100)); /* 1000px */

Paramètres

La fonction sqrt(x) n'accepte qu'une seule valeur comme paramètre.

x: Un calcul qui se résout en un nombre (<number>) supérieur ou égal à 0.

Valeur de retour

Retourne un nombre (<number>) qui est la racine carrée de x.

Si x est +∞, le résultat est +∞.
Si x est 0⁻, le résultat est 0⁻.
Si x est inférieur à 0, le résultat est NaN.

Syntaxe formelle

<sqrt()> = 
  sqrt( <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

Changer la taille des boîtes en fonction de la racine carrée

Cet exemple montre comment utiliser la fonction sqrt() pour calculer des tailles.

HTML

html

<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>

CSS

Ici, nous utilisons des propriétés personnalisées CSS pour définir les tailles à utiliser. Tout d'abord, nous déclarons la première taille (--size-0), qui est ensuite utilisée pour calculer les autres tailles.

--size-1 est calculé en multipliant la valeur de --size-0 (50px) par la racine carrée de 4 (2), ce qui donne 100px.
--size-2 est calculé en multipliant la valeur de --size-0 (50px) par la racine carrée de 9 (3), ce qui donne 150px.
--size-3 est calculé en multipliant la valeur de --size-0 (50px) par la racine carrée de 16 (4), ce qui donne 200px.

css

:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /*  100px */
  --size-2: calc(var(--size-0) * sqrt(9)); /*  150px */
  --size-3: calc(var(--size-0) * sqrt(16)); /*  200px */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Les tailles sont ensuite appliquées en tant que valeurs de width et height des sélecteurs.

css

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}