`Round()` - Fonction CSS

round()

Résumé des caractéristiques de la fonction `round()`

Description rapide

Calcule l'arrondi d'un nombre.

Statut

Standard

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 4

Statut du document: WD (document de travail)

Schéma syntaxique de `round()`.

Schéma syntaxique de la fonction round().
Cliquez sur les termes du diagram pour plus de précision.

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

number est la valeur à arrondir.
integer est la granularité de l'arrondi.

Description de la fonction `round()`.

La fonction round(v, g) arrondit le nombre v au multiple de g le plus proche. Un paramètre supplémentaire optionnel précise comment doit se faire l'arrondi.

Sans trop entrer dans les détails (qui sont décrits plus bas), voici quelques exemples :
round(44,10) renvoie 40.
round(87,100) renvoie 100.

La valeur `round()` peut être utilisée avec les propriétés suivantes :

En principe, les fonctions de calcul comme round() doivent pouvoir être utilisées à la place de n'importe quelle valeur numérique affectée à une propriété, dans la mesure où les types sont en accord. Par exemple si une propriété attend une dimension, il faut que la fonction renvoie une dimension.

Syntaxes de la fonction `round()`.

<propriété>: round(10%, 20px); v g <propriété>: round(nearest, 10%, 20px); s v g

Lorsqu'il est présent, le premier paramètre s indique la stratégie d'arrondi. Dans cet exemple, l'arrondi sera fait au plus proche. Si ce paramètre est omis, c'est la valeur nearest qui est par défaut.
Les deux autres paramètres v et g peuvent être des nombres sans unité, ou avec une unité. Dans ce cas, les deux unités ne seront pas forcément les mêmes mais doivent représenter des grandeurs physiques de même nature. Par exemple, si le premier paramètre est en pixels, le deuxième pourra être en centimètres, mais pas en degrés.

Dans cet exemple, l'arrondi se fait au plus proche. Supposons que la valeur en pourcentage se résolve en 114px, le multiple de 20px le plus proche est 120px.
<propriété>: round(up, 10%, 20px); s v g

Ici le mot up spécifie un arrondi au dessus. Si les 10% se résolvent en 101 pixels, la fonction retournera 120px (premier multiple de 20 supérieur à 101).
<propriété>: round(down, 10%, 20px); s v g

Le mot down spécifie un arrondi en dessous. Si le premier paramètre en pourcentages donne 99 pixels, l'arrondi au dessous sera 80 pixels.
<propriété>: round(to-zero, 10%, 20px); s v g

La stratégie d'arrondi to-zero compare les valeurs qui auraient été obtenues avec up et avec down et choisit celle qui est la plus proche de zéro, en valeur absolue.

Simulateur avec la fonction `round()`.

La fonction round() est appliquée à la largeur de l'élément bleu ci-dessous. Vous pouvez faire varier les valeurs des pourcentages en changeant la taille de la fenêtre du navigateur (sur un PC de bureau).

width :

Résultat

Support de la fonction `round()`.

La fonction round() est maintenant bien prise en charge par les navigateurs couramment utilisés.

Colonne 1

Support par les navigateurs de la fonction round(), qui arrondit un nombre.

Fonction
round()

Estimation de la prise en charge globale.

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `round()`.

Module CSS - Valeurs et unités - Niveau 4

La fonction round() est une des fonctions de calcul mathématique ajoutées par ce niveau de la spécification.

14 Août 2018
Document de travail.

Autres fonctions de calcul en CSS

Voici la liste des nombreuses fonctions de calcul définies dans la spécification CSS Values and Units Module :

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()