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 metodeMath.ceil()
JavaScript. Membulatkan nilai ke atas ke kelipatan bilangan bulat terdekat dari interval pembulatan.down
: Setara dengan metodeMath.floor()
JavaScript. Membulatkan nilai ke bawah ke kelipatan bilangan bulat terdekat dari interval pembulatan.nearest
(default): Setara dengan JavaScriptMath.round()
. Membulatkan nilai ke atas atau ke bawah, ke kelipatan bilangan bulat terdekat dari interval pembulatan.to-zero
: Setara dengan metodeMath.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.