Yayınlanma tarihi: 14 Mayıs 2024
Tüm büyük motorlar artık CSS basamaklı değer matematik işlevlerini (round(), mod() ve rem()) destekliyor.
Basamaklı değer işlevlerinin tümü, belirli bir değeri başka bir basamak 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 yuvarlanır ve yuvarlama aralığının en yakın tam sayı katına getirilir.
Yuvarlanacak değer veya yuvarlanmış aralık, CSS özel özelliği olmalıdır. Her iki değeri de kodla sabitlemek geçerli olsa da değeri kendiniz hesaplayabiliyorsanız bir sayıyı yuvarlamanın pek bir anlamı yoktur.
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
'tür. Yuvarlama stratejisini içeren önceki örnek şu şekildedir:
font-size: round(nearest,var(--my-font-size), 1rem);
Yuvarlama stratejisi için olası değerler şunlardır:
up
: JavaScriptMath.ceil()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlar.down
: JavaScriptMath.floor()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlar.nearest
(varsayılan): JavaScriptMath.round()
ile eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlayın.to-zero
: JavaScriptMath.trunc()
yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına (sıfıra daha yakın) yuvarlar.
Dan Wilson'un The New CSS Math: round()
(Yeni CSS Matematik: round()
) adlı makalesinde round()
hakkında daha fazla bilgi edinebilirsiniz.
rem()
ve mod()
işlevleri
rem()
ve mod()
CSS işlevleri, JavaScript kalan operatörüne ("%") benzer şekilde çalışır. İki değer alır. İlk değer (bölen) ikinci değere (bölen) bölünür ve kalan döndürülür.
margin: rem(18px, 5px); /* returns 3px */
İki işlev arasındaki fark, rem()
işlevinin bölenin işaretini her zaman alması nedeniyle, ilk değer pozitifse döndürülen değer de pozitif olacaktır. mod()
işlevi, bölenin işaretini alır.
Dan Wilson'un Yeni CSS Matematik: rem()
ve mod()
adlı makalesinde rem()
ve mod()
hakkında daha fazla bilgi edinin.