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

Rachel Andrew

Tous les principaux moteurs sont désormais compatibles avec les fonctions mathématiques des valeurs échelonnées du CSS : round(), mod(), et rem().

Les fonctions de valeur échelonnée transforment toutes une valeur donnée en fonction d'une autre valeur de pas.

Fonction round()

La fonction round() accepte 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 le plus proche de l'intervalle d'arrondi.

La valeur à arrondir ou l'intervalle arrondi doit être une valeur CSS personnalisée. Bien qu'il soit possible de coder les deux valeurs en dur, en arrondissant un nombre si vous pouviez calculer la valeur vous-même.

Le CSS suivant arrondit la valeur --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, avec les la stratégie d'arrondi est la suivante:

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

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

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

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

Les fonctions rem() et mod()

Les fonctions CSS rem() et mod() fonctionnent de la même manière que JavaScript. opérateur "reste" (%). Ils prennent deux valeurs : la première (le diviseur) est divisée par la seconde (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 seront positives. La fonction mod() utilise le signe du diviseur.

En savoir plus sur rem() et mod() dans The New CSS Math: rem() et mod(), par Dan Wilson.