Tutti i principali motori ora supportano le funzioni matematiche dei valori con rientri CSS: round(), mod(), e rem().
Le funzioni con valori a più livelli trasformano tutte un determinato valore in base a un valore del passo.
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 un CSS personalizzata. Sebbene sia valido applicare l'hardcode di entrambi i valori, c'è di arrotondamento di un numero se riesci a calcolare autonomamente il valore.
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
di arrotondamento è la seguente:
font-size: round(nearest,var(--my-font-size), 1rem);
I valori possibili per la strategia di arrotondamento sono:
up: equivale al metodoMath.ceil()JavaScript. Arrotonda il valore per eccesso al multiplo intero più vicino dell'intervallo di arrotondamento.down: equivale al metodoMath.floor()JavaScript. Arrotonda il valore per difetto al multiplo intero più vicino dell'intervallo di arrotondamento.nearest(valore predefinito): equivale aMath.round()JavaScript. Arrotonda la superiore o inferiore, al multiplo intero più vicino dell'intervallo di arrotondamento.to-zero: equivale al metodoMath.trunc()JavaScript. Arrotonda il valore al multiplo intero più vicino dell'intervallo di arrotondamento più vicino a zero.
Scopri di più su round() in
Il nuovo CSS Math: round(),
di Dan Wilson.
Le funzioni rem() e mod()
Le funzioni CSS rem() e mod() funzionano in modo simile al funzionamento di JavaScript
operatore residuo (%). Assumono due valori: il primo (il dividendo) è diviso per il secondo (il divisore),
e il resto viene restituito.
margin: rem(18px, 5px); /* returns 3px */
La differenza tra le due funzioni è che rem() prende sempre il segno
del dividendo, pertanto se il primo valore è positivo, il valore restituito
sarà positivo. La funzione mod() assume il segno del divisore.
Scopri di più su rem() e mod() in
Il nuovo CSS Math: rem() e mod(),
di Dan Wilson.