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

Rachel Andrew

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

Le funzioni con valori con rientri trasformano tutte un determinato valore in base a un altro valore di passaggio.

La funzione round()

La funzione round() richiede l'arrotondamento di un valore, 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 entrambi i valori come hardcoded, l'arrotondamento di un numero è limitato se il valore viene calcolato 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 inclusa 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: equivale al metodo Math.ceil() di JavaScript. Arrotonda per eccesso il valore al multiplo intero più vicino dell'intervallo.
  • down: equivale al metodo Math.floor() di JavaScript. Arrotonda per difetto il valore al multiplo intero più vicino dell'intervallo di arrotondamento.
  • nearest (predefinito): equivale a Math.round() JavaScript. Arrotonda per eccesso o per difetto il valore al multiplo intero più vicino dell'intervallo di arrotondamento.
  • to-zero: equivale 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 rimanente (%) di JavaScript. Assumono 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() prende sempre il segno del dividendi; 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.