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

Rachel Andrew

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: JavaScript Math.ceil() yöntemine eşdeğerdir. Değeri, yuvarlama aralığının en yakın tam katına yuvarlar.
  • down: JavaScript Math.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: JavaScript Math.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.