CSS basamaklı değer matematik işlevleri artık 2024'ün temel çizgisinde

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: JavaScript Math.ceil() yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlar.
  • down: JavaScript Math.floor() yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlar.
  • nearest (varsayılan): JavaScript Math.round() ile eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam sayı katına yuvarlayın.
  • to-zero: JavaScript Math.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.