Các hàm toán học giá trị theo bậc của CSS hiện đã có trong Baseline 2024

Rachel Andrew

Tất cả công cụ chính hiện đã hỗ trợ hàm toán học giá trị theo bậc CSS— round(), mod(), và rem().

Tất cả các hàm giá trị bậc thang đều biến đổi một giá trị đã cho thành một giá trị khác step value.

Hàm round()

Hàm round() nhận một giá trị cần làm tròn, khoảng thời gian làm tròn và chiến lược làm tròn tuỳ chọn. Giá trị được làm tròn theo chiến lược làm tròn, thành bội số nguyên gần nhất của khoảng làm tròn.

Giá trị cần làm tròn hoặc khoảng thời gian làm tròn phải là một CSS thuộc tính tuỳ chỉnh. Mặc dù việc mã hoá cứng cả hai giá trị đều hợp lệ, nhưng hầu như không có làm tròn một số nếu bạn có thể tự tính giá trị đó.

CSS sau đây làm tròn giá trị của --my-font-size đến khoảng 1rem.

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

Chiến lược làm tròn mặc định là nearest. Ví dụ trước, bao gồm như sau:

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

Các giá trị có thể có cho chiến lược làm tròn là:

  • up: Tương đương với phương thức Math.ceil() của JavaScript. Làm tròn giá trị lên thành bội số nguyên gần nhất của khoảng làm tròn.
  • down: Tương đương với phương thức Math.floor() của JavaScript. Làm tròn giá trị xuống bội số nguyên gần nhất của khoảng làm tròn.
  • nearest (mặc định): Tương đương với JavaScript Math.round(). Làm tròn giá trị tăng hoặc giảm, thành bội số nguyên gần nhất của khoảng làm tròn.
  • to-zero: Tương đương với phương thức Math.trunc() của JavaScript. Làm tròn giá trị với bội số nguyên gần nhất của khoảng làm tròn gần 0 hơn.

Tìm hiểu thêm về round() trong Toán học CSS mới: round(), của Dan Wilson.

Các hàm rem() và mod()

Các hàm CSS rem() và mod() hoạt động theo cách tương tự như JavaScript toán tử còn lại (%). Người này nhận hai giá trị, giá trị thứ nhất (số bị chia) chia cho giá trị thứ hai (số chia), và phần còn lại sẽ được trả về.

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

Sự khác biệt giữa 2 hàm này là rem() luôn nhận dấu của cổ tức, do đó nếu giá trị đầu tiên là số dương thì giá trị trả về sẽ là dương. Hàm mod() nhận dấu của số chia.

Tìm hiểu thêm về rem() và mod() trong Toán học CSS mới: rem() và mod(), của Dan Wilson.