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 metodoMath.ceil()
di JavaScript. Arrotonda il valore per eccesso al multiplo intero più vicino dell'intervallo di arrotondamento.down
: equivalente al metodoMath.floor()
di JavaScript. Arrotonda il valore per difetto al multiplo intero più vicino dell'intervallo di arrotondamento.nearest
(valore predefinito): equivalente a JavaScriptMath.round()
. Arrotonda il valore per eccesso o per difetto al multiplo intero più vicino dell'intervallo di arrotondamento.to-zero
: equivalente al metodoMath.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.