Fungsi matematika nilai yang dilangkah CSS kini tersedia di Dasar Pengukuran 2024

Dipublikasikan: 14 Mei 2024

Semua mesin utama kini mendukung fungsi matematika nilai bertahap CSS— round(), mod(), dan rem().

Semua fungsi nilai berundak mengubah nilai tertentu sesuai dengan nilai langkah lain.

Fungsi round()

Fungsi round() menggunakan nilai yang akan dibulatkan, interval pembulatan, dan strategi pembulatan opsional. Nilai dibulatkan sesuai dengan strategi pembulatan, ke kelipatan bilangan bulat terdekat dari interval pembulatan.

Nilai yang akan dibulatkan, atau interval yang dibulatkan, harus berupa properti kustom CSS. Meskipun valid untuk melakukan hardcode pada kedua nilai, tidak ada gunanya membulatkan angka jika Anda dapat menghitung nilainya sendiri.

CSS berikut membulatkan nilai --my-font-size, ke interval 1rem.

font-size: round(var(--my-font-size), 1rem);

Strategi pembulatan default adalah nearest. Contoh sebelumnya termasuk strategi pembulatan adalah sebagai berikut:

font-size: round(nearest,var(--my-font-size), 1rem);

Kemungkinan nilai untuk strategi pembulatan adalah:

  • up: Setara dengan metode Math.ceil() JavaScript. Membulatkan nilai ke atas ke kelipatan bilangan bulat terdekat dari interval pembulatan.
  • down: Setara dengan metode Math.floor() JavaScript. Membulatkan nilai ke bawah ke kelipatan bilangan bulat terdekat dari interval pembulatan.
  • nearest (default): Setara dengan JavaScript Math.round(). Membulatkan nilai ke atas atau ke bawah, ke kelipatan bilangan bulat terdekat dari interval pembulatan.
  • to-zero: Setara dengan metode Math.trunc() JavaScript. Membulatkan nilai ke kelipatan bilangan bulat terdekat dari interval pembulatan yang lebih dekat ke nol.

Pelajari round() lebih lanjut di Matematika CSS Baru: round(), oleh Dan Wilson.

Fungsi rem() dan mod()

Fungsi CSS rem() dan mod() berfungsi dengan cara yang mirip dengan operator sisa (%) JavaScript. Fungsi ini menggunakan dua nilai, yang pertama (pembilang) dibagi dengan yang kedua (pembagi), dan sisanya ditampilkan.

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

Perbedaan antara kedua fungsi tersebut adalah rem() selalu menggunakan tanda dividen, sehingga jika nilai pertama positif, nilai yang ditampilkan akan positif. Fungsi mod() menggunakan tanda pembagi.

Pelajari rem() dan mod() lebih lanjut di The New CSS Math: rem() and mod(), oleh Dan Wilson.