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

Rachel Andrew

Tüm büyük motorlar artık CSS adımlı değer matematik işlevlerini desteklemektedir. round(), mod(), ve rem() ifadeleri kullanılır.

Basamaklı değer fonksiyonlarının tümü, verilen değeri başka bir değere göre dönüştürür. adım değeri.

round() işlevi

round() işlevi, yuvarlanması gereken bir değer alır. bir yuvarlama aralığı ve isteğe bağlı bir yuvarlama stratejisidir. Değer, yuvarlama stratejisine göre yuvarlanır. yuvarlama aralığının en yakın tam sayı katına.

Yuvarlatılacak değer veya yuvarlatılmış aralık bir CSS olmalıdır özel mülktür. Her iki değeri de koda gömmek geçerli olsa da, değeri kendiniz hesaplayabilecekseniz bir sayıyı puan yuvarlama.

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 olarak ayarlanmıştır. Önceki örnek yuvarlama stratejisi ş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 yukarı yuvarlar yuvarlama aralığının en yakın tam katına.
  • down: JavaScript Math.floor() yöntemine eşdeğerdir. Değeri yuvarlar aşağı yuvarlama aralığının en yakın tam katına iner.
  • nearest (varsayılan): Math.round() JavaScript'ine eşdeğerdir. Yuvarlar değeri, yuvarlama aralığının en yakın tam katına doğru veya aşağı doğru bir değere ayarlayın.
  • to-zero: JavaScript Math.trunc() yöntemine eşdeğerdir. Değeri yuvarlar sıfıra daha yakın yuvarlama aralığının en yakın tam sayı katına.

round() hakkında daha fazla bilgiyi şurada bulabilirsiniz: Yeni CSS Matematiği: round(), hazırlayan: Dan Wilson.

rem() ve mod() işlevleri

rem() ve mod() CSS işlevleri JavaScript'e benzer şekilde çalışır kalan operatör (%). Bunlar iki değer alır; ilki (bölen) ikinciye (bölen) bölünür. kalan kısmı döndürülür.

margin: rem(18px, 5px); /* returns 3px */

İki işlev arasındaki fark şudur: rem() işareti her zaman işareti alır bölünmesini ifade eder. Dolayısıyla, 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 şuradan edinebilirsiniz: Yeni CSS Matematiği: rem() ve mod(), hazırlayan: Dan Wilson.