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 đều hỗ trợ các hàm toán học giá trị theo bậc của CSS – round(), mod() và rem().

Các hàm giá trị theo bậc đều biến đổi một giá trị nhất định theo một giá trị bước khác.

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à một chiến lược làm tròn không bắt buộc. Giá trị được làm tròn theo chiến lược làm tròn, đến bội số nguyên gần nhất của khoảng thời gian làm tròn.

Giá trị cần làm tròn hoặc khoảng thời gian được làm tròn phải là một thuộc tính tuỳ chỉnh CSS. Mặc dù bạn có thể mã hoá cứng cả hai giá trị, nhưng sẽ có rất ít điểm 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. Sau đây là ví dụ về chiến lược làm tròn trong ví dụ trước:

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 đến bội số nguyên gần nhất của khoảng thời gian 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 thời gian làm tròn.
  • nearest (mặc định): Tương đương với JavaScript Math.round(). Làm tròn giá trị lên hoặc xuống đến bội số nguyên gần nhất của khoảng thời gian 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ị lên bội số nguyên gần nhất của khoảng thời gian làm tròn gần với 0.

Hãy tìm hiểu thêm về round() trong bài viết The New CSS Math: round() của Dan Wilson.

Hàm rem() và mod()

Hàm CSS rem() và mod() hoạt động theo cách tương tự như toán tử còn lại (%) của JavaScript. Các hàm này nhận hai giá trị: giá trị đầu tiên (số bị chia) chia cho giá trị thứ hai (số chia) và trả về giá trị còn lại.

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

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

Tìm hiểu thêm về rem() và mod() trong The New CSS Math: rem() và mod() của Dan Wilson.