Le funzioni matematiche dei valori con rientri CSS sono ora disponibili in Baseline 2024

Data di pubblicazione: 14 maggio 2024

Tutti i principali motori ora supportano le funzioni matematiche dei valori con incrementi CSS: round(), mod(), e rem().

Tutte le funzioni di valore a gradini trasformano un determinato valore in base a un altro valore di incremento.

La funzione round()

La funzione round() accetta un valore da arrotondare, un intervallo di arrotondamento e una strategia di arrotondamento facoltativa. Il valore viene arrotondato in base alla strategia di arrotondamento al multiplo intero più vicino dell'intervallo di arrotondamento.

Il valore da arrotondare o l'intervallo arrotondato deve essere una proprietà personalizzata CSS. Sebbene sia valido impostare entrambi i valori in modo hardcoded, non c'è molto suo nell'arrotondare un numero se puoi calcolare il valore autonomamente.

Il seguente CSS arrotonda il valore di --my-font-size all'intervallo di 1rem.

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

La strategia di arrotondamento predefinita è nearest. L'esempio precedente che include la strategia di arrotondamento è il seguente:

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

I valori possibili per la strategia di arrotondamento sono:

  • up: equivalente al metodo Math.ceil() di JavaScript. Arrotonda il valore per eccesso al multiplo intero più vicino dell'intervallo di arrotondamento.
  • down: equivalente al metodo Math.floor() di JavaScript. Arrotonda il valore per difetto al multiplo intero più vicino dell'intervallo di arrotondamento.
  • nearest (valore predefinito): equivalente a JavaScript Math.round(). Arrotonda il valore per eccesso o per difetto al multiplo intero più vicino dell'intervallo di arrotondamento.
  • to-zero: equivalente al metodo Math.trunc() di JavaScript. Arrotonda il valore al multiplo intero più vicino dell'intervallo di arrotondamento più vicino a zero.

Scopri di più su round() in The New CSS Math: round(), di Dan Wilson.

Le funzioni rem() e mod()

Le funzioni CSS rem() e mod() funzionano in modo simile all'operatore modulo (%) di JavaScript. Prendono due valori, il primo (il dividendo) viene diviso per il secondo (il divisore) e viene restituito il resto.

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

La differenza tra le due funzioni è che rem() assume sempre il segno del dividendo, pertanto se il primo valore è positivo, il valore restituito sarà positivo. La funzione mod() prende il segno del divisore.

Scopri di più su rem() e mod() in The New CSS Math: rem() and mod(), di Dan Wilson.