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 de valeur échelonnée CSS, à savoir round(), mod() et rem().

Célébration : cette fonctionnalité Web est désormais disponible dans les trois principaux moteurs de navigateur.

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

La fonction round()

La fonction round() nécessite d'arrondir une valeur, un intervalle d'arrondi et une stratégie d'arrondi facultative. La valeur est arrondie en fonction de 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 possible de coder en dur les deux valeurs, il y a peu de choses à arrondir un nombre si vous pouviez 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 avec 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: équivaut à la méthode Math.ceil() JavaScript. Arrondit la valeur au multiple supérieur le plus proche de l'intervalle d'arrondi.
• down: équivaut à la méthode Math.floor() JavaScript. Arrondit la valeur au multiple inférieur le plus proche de l'intervalle d'arrondi.
• nearest (par défaut): équivalent à JavaScript Math.round(). Arrondit la valeur au multiple supérieur le plus proche de l'intervalle d'arrondi.
• to-zero: équivaut à la méthode Math.trunc() JavaScript. Arrondit la valeur au multiple entier le plus proche de l'intervalle d'arrondi, le plus proche de zéro.

Pour en savoir plus sur round(), lisez l'article The New CSS Math: round() de Dan Wilson.

Fonctions rem() et mod()

Les fonctions CSS rem() et mod() fonctionnent de la même manière que l'opérateur restant (%) JavaScript. Elles prennent deux valeurs : la première (le dividende) 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 sera positive. La fonction mod() prend le signe du diviseur.

Remarque :Les unités des deux valeurs ne doivent pas nécessairement être identiques, mais elles doivent être du même type (un nombre, une dimension ou un pourcentage). La valeur renvoyée sera alors du même type que la valeur transmise.

Pour en savoir plus sur rem() et mod(), lisez l'article The New CSS Math: rem() and mod() de Dan Wilson.