Fonction CSS `hypot()`

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 hypot() est une fonction exponentielle qui retourne la racine carrée de la somme des carrés de ses paramètres.

Alors que pow() et sqrt() ne fonctionnent que sur des nombres sans unité, hypot() accepte des valeurs avec des unités, mais elles doivent toutes avoir le même type.

Syntaxe

css

/* Valeur de type <number> */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

Paramètres

La fonction hypot(x [, ...]#) accepte un ou plusieurs calculs séparés par des virgules comme paramètres.

x, x2, ..., xN: Un calcul qui se résout en un nombre (<number>), une dimension (<dimension>), ou un pourcentage (<percentage>).

Valeur de retour

Retourne un nombre (<number>), une dimension (<dimension>), ou un pourcentage (<percentage>) (en fonction des entrées), qui est la racine carrée de la somme des carrés de ses paramètres.

Si l'une des entrées est infinite, le résultat est +∞.
Si un seul paramètre est fourni, le résultat est la valeur absolue de son entrée. hypot(2em) et hypot(-2em) donnent tous deux 2em.

Syntaxe formelle

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

Tailles basées sur la fonction `hypot`

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

HTML

html

<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</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é avec l'hypoténuse de --size-0 (100px). Cela prend la valeur au carré et, comme il n'y a pas d'autre valeur, retourne la racine carrée de la valeur, ce qui donne 100px.
--size-2 est calculé avec l'hypoténuse de --size-0 (100px), deux fois. Cela prend le carré de la valeur (100px * 100px = 10000px²) et l'ajoute au carré de --size-0 à nouveau (10000px² + 10000px² = 20000px²) et retourne la racine carrée de la somme (√(20000px²)), ce qui donne 141.42px.
--size-3 est calculé avec l'hypoténuse --size-0 * 1.5 (150px) et --size-0 * 2 (200px). Le résultat est la racine carrée de la somme de leurs carrés : les valeurs sont mises au carré (22500px² et 40000px²) et additionnées (62500px²), la somme étant ensuite mise à la racine carrée (√(62500px²)) donnant 250px.

css

:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /*  100px */
  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /*  250px */
}

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