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

Ngày xuất bản: 14 tháng 5 năm 2024

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

Các hàm giá trị 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, một khoảng 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 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 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 việc làm tròn một số sẽ không có ý nghĩa gì nếu bạn có thể tự tính toán giá trị đó.

CSS sau đây làm tròn giá trị của --my-font-size, thành 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 cả chiến lược làm tròn 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 đến 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ị lên hoặc xuống đến 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ị lên bội số nguyên gần nhất của khoảng làm tròn gần với 0 hơn.

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

Hàm rem()mod()

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

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

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

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