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

Rachel Andrew

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

Perayaan: Fitur web ini kini tersedia di ketiga mesin browser utama!

Semua fungsi nilai berundak mengubah nilai tertentu menurut yang lain nilai langkah.

Fungsi round()

Fungsi round() mengambil nilai untuk 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 CSS properti kustom. Meskipun hardcode kedua nilai itu valid, ada sedikit membulatkan angka jika Anda bisa 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 yang menyertakan strategi pembulatan adalah sebagai berikut:

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

Nilai yang mungkin untuk strategi pembulatan adalah:

• up: Setara dengan metode Math.ceil() JavaScript. Membulatkan nilai ke atas ke bilangan bulat terdekat dari interval pembulatan.
• down: Setara dengan metode Math.floor() JavaScript. Membulatkan nilai ke bilangan bulat terdekat dari interval pembulatan.
• nearest (default): Setara dengan Math.round() JavaScript. Membulatkan nilai naik atau turun, ke 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 lebih lanjut round() di Matematika CSS Baru: round(), oleh Dan Wilson.

Fungsi rem() dan mod()

Fungsi CSS rem() dan mod() bekerja dengan cara yang mirip dengan JavaScript operator sisa (%). Mereka mengambil dua nilai, yang pertama (dibagi) dibagi dengan yang kedua (pembagi), dan sisanya akan dikembalikan.

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

Perbedaan antara kedua fungsi tersebut adalah rem() selalu mengambil tanda dari dividen, oleh karena itu jika nilai pertama positif nilai yang dikembalikan adalah positif. Fungsi mod() mengambil tanda pembagi.

Catatan: Satuan dari kedua nilai ini tidak harus sama, tetapi nilainya harus jenis yang sama—angka, dimensi, atau persentase. Nilai yang ditampilkan akan menjadi jenis yang sama dengan nilai yang diteruskan.

Pelajari lebih lanjut rem() dan mod() di Matematika CSS Baru: rem() dan mod(), oleh Dan Wilson.