Les fonctions mathématiques de valeur échelonnée CSS sont désormais disponibles dans Baseline 2024

Publié le 14 mai 2024

Tous les principaux moteurs acceptent désormais les fonctions mathématiques CSS à valeurs incrémentielles : round(), mod() et rem().

Les fonctions de valeur par incréments transforment toutes une valeur donnée en fonction d'une autre valeur par incréments.

Fonction round()

La fonction round() prend une valeur à arrondir, un intervalle d'arrondi et une stratégie d'arrondi facultative. La valeur est arrondie selon la stratégie d'arrondi, au multiple entier le plus proche de l'intervalle d'arrondi.

La valeur à arrondir ou l'intervalle arrondi doit être une propriété CSS personnalisée. Bien qu'il soit valide de coder en dur les deux valeurs, il n'y a pas de raison d'arrondir un nombre si vous pouvez calculer la valeur vous-même.

Le code CSS suivant arrondit la valeur de --my-font-size à l'intervalle de 1rem.

font-size: round(var(--my-font-size), 1rem);

La stratégie d'arrondi par défaut est nearest. L'exemple précédent incluant la stratégie d'arrondi est le suivant:

font-size: round(nearest,var(--my-font-size), 1rem);

Les valeurs possibles pour la stratégie d'arrondi sont les suivantes:

  • up: équivalent de la méthode JavaScript Math.ceil(). Arrondit la valeur à l'entier supérieur le plus proche de l'intervalle d'arrondi.
  • down: équivalent de la méthode JavaScript Math.floor(). Arrondit la valeur à l'entier inférieur le plus proche du multiple entier de l'intervalle d'arrondi.
  • nearest (par défaut): équivalent de Math.round() JavaScript. Arrondit la valeur à l'entier supérieur ou inférieur le plus proche du multiple entier de l'intervalle d'arrondi.
  • to-zero: équivalent de la méthode JavaScript Math.trunc(). Arrondit la valeur au multiple entier le plus proche de l'intervalle d'arrondi le plus proche de zéro.

En savoir plus sur round() dans The New CSS Math: round() (Les nouvelles mathématiques CSS : round()), par Dan Wilson

Fonctions rem() et mod()

Les fonctions CSS rem() et mod() fonctionnent de manière similaire à l'opérateur de reste (%) JavaScript. Elles prennent deux valeurs, le premier (le dividende) est divisé par le second (le diviseur), et le reste est renvoyé.

margin: rem(18px, 5px); /* returns 3px */

La différence entre les deux fonctions est que rem() prend toujours le signe du dividende. Par conséquent, si la première valeur est positive, la valeur renvoyée sera positive. La fonction mod() utilise le signe du diviseur.

Pour en savoir plus sur rem() et mod(), consultez The New CSS Math: rem() and mod() (Les nouvelles mathématiques CSS : rem() et mod()) de Dan Wilson.