Round() - Fonction CSS

Schéma syntaxique de round().

Signification des termes présents sur le schéma :

• 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.

Voyez aussi les fonctions mod() et rem() qui effectuent des calculs similaires.

La fonction 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).

Prise en charge des fonctions mathématiques par les navigateurs.

A part chez Firefox   et Safari  , la fonction round() n'est pas prise en charge par les navigateurs à l'heure actuelle (2024).

1

Fonction
round()

Estimation de la prise en charge globale.

20%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

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 :

Fonctions :

Valeurs: