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