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().

Semua fungsi nilai yang dilangkahkan mengubah nilai tertentu menurut nilai langkah lainnya.

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 bulat harus berupa properti khusus CSS. Meskipun valid untuk melakukan hardcode kedua nilai, ada sedikit poin yang membulatkan angka jika Anda dapat menghitung nilai 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 mencakup 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 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 mendekati nol.

Pelajari round() lebih lanjut di The New CSS Math: round(), oleh Dan Wilson.

Fungsi rem() dan mod()

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

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

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

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