Tüm önemli motorlar artık CSS basamaklı değer matematik işlevlerini (round(), mod() ve rem()) desteklemektedir.
Basamaklı değer işlevlerinin tümü, belirli bir değeri başka bir adım değerine göre dönüştürür.
round()
işlevi
round()
işlevi, yuvarlanacak bir değer, yuvarlama aralığı ve isteğe bağlı bir yuvarlama stratejisi alır.
Değer, yuvarlama stratejisine göre yuvarlama aralığının en yakın tam sayı katına yuvarlanır.
Yuvarlanacak değer veya yuvarlanan aralık, bir CSS özel özelliği olmalıdır. Her iki değeri de sabit bir şekilde kodlamak geçerli olsa da, değeri kendiniz hesaplayabiliyorsanız bir sayıyı yuvarlamanız mümkün değildir.
Aşağıdaki CSS, --my-font-size
değerini 1rem
aralığına yuvarlar.
font-size: round(var(--my-font-size), 1rem);
Varsayılan yuvarlama stratejisi nearest
'dir. Yuvarlama stratejisini içeren önceki örnek aşağıdaki gibidir:
font-size: round(nearest,var(--my-font-size), 1rem);
Yuvarlama stratejisine ilişkin olası değerler şunlardır:
up
: JavaScriptMath.ceil()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam katına yuvarlar.down
: JavaScriptMath.floor()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam katına yuvarlar.nearest
(varsayılan):Math.round()
JavaScript'e eş değerdir. Değeri, yuvarlama aralığının en yakın tam katına yukarı veya aşağı yuvarlar.to-zero
: JavaScriptMath.trunc()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın (sıfıra yakın) tam sayı katına yuvarlar.
round()
hakkında daha fazla bilgiyi Dan Wilson'ın The New CSS Math: round()
adlı kitabında bulabilirsiniz.
rem()
ve mod()
işlevleri
rem()
ve mod()
CSS işlevleri, JavaScript'in kalan operatörü (%) ile benzer şekilde çalışır. Bunlar iki değer alır: Birinci (bölen) ikinciye bölünür (bölen) ve kalan değer döndürülür.
margin: rem(18px, 5px); /* returns 3px */
İki işlev arasındaki fark, rem()
her zaman temettü işaretinin alınmasıdır. Bu nedenle, ilk değer pozitifse döndürülen değer pozitif olur. mod()
işlevi bölenin işaretini alır.
rem()
ve mod()
hakkında daha fazla bilgiyi Dan Wilson'ın
The New CSS Math: rem()
and mod()
bölümünde bulabilirsiniz.