CSS min(), max() và clamp()

Tìm hiểu cách kiểm soát kích thước phần tử, duy trì khoảng cách phù hợp và triển khai kiểu chữ linh hoạt bằng các hàm CSS được hỗ trợ hiệu quả này.

Una Kravets

Khi thiết kế thích ứng trở nên chi tiết hơn, CSS liên tục phát triển để mang lại cho tác giả nhiều quyền kiểm soát hơn. Hàm min(), max() và clamp() hiện được hỗ trợ trong tất cả các trình duyệt hiện đại là một trong những công cụ mới nhất giúp các trang web và ứng dụng tạo ra sinh động và thích ứng hơn. Bạn có thể sử dụng các hàm này để kiểm soát việc định cỡ và đổi kích thước phần tử, duy trì khoảng cách giữa các phần tử, cũng như tạo kiểu chữ linh hoạt và linh hoạt.

Các hàm toán học calc(), min(), max() và clamp() cho phép sử dụng các biểu thức toán học có phép cộng (+), trừ (-), nhân (*) và phép chia (/) làm giá trị thành phần

Giá trị CSS và đơn vị cấp 4

Hỗ trợ trình duyệt

min()

max()

clamp()

Cách sử dụng

Bạn có thể sử dụng min(), max() và clamp() ở bên phải của bất kỳ biểu thức CSS nào nếu thích hợp. Đối với min() và max(), bạn cung cấp một danh sách đối số gồm các giá trị và trình duyệt sẽ xác định giá trị nào nhỏ nhất hoặc lớn nhất. Ví dụ: trong trường hợp width: min(1rem, 50%, 10vw), trình duyệt sẽ tính toán đơn vị tương đối nào là nhỏ nhất và sử dụng giá trị đó cho chiều rộng của phần tử.

Hàm max() thực hiện tương tự đối với giá trị lớn nhất.

Để sử dụng clamp(), hãy nhập 3 giá trị: giá trị tối thiểu, giá trị lý tưởng để tính toán và giá trị tối đa.

Bạn có thể sử dụng các hàm này ở bất cứ nơi nào <length>, <frequency>, <angle>, <time>, <percentage>, <number> hoặc <integer> được cho phép. Bạn có thể sử dụng riêng các thuộc tính này (như trong font-size: max(0.5vw, 50%, 2rem)), với calc() (như trong font-size: max(calc(0.5vw - 1em), 2rem)) hoặc kết hợp (như trong font-size: max(min(0.5vw, 1em), 2rem)).

Sau đây là một số ví dụ về cách sử dụng các hàm này.

Chiều rộng hoàn hảo

Theo The Elements of Typographic Style (Các yếu tố về kiểu chữ) của Robert Bringhurst, "bất kỳ thứ gì từ 45 đến 75 ký tự đều được coi là độ dài một dòng vừa ý đối với một trang gồm một cột được đặt ở mặt văn bản có kiểu chữ ở kích thước văn bản".

Để đảm bảo rằng khối văn bản của bạn dài từ 45 đến 75 ký tự, hãy sử dụng clamp() và ch (đơn vị chuyển đổi ký tự theo chiều rộng 0):

p {
  width: clamp(45ch, 50%, 75ch);
}

Điều này cho phép trình duyệt xác định chiều rộng của đoạn. Thuộc tính này đặt chiều rộng thành 50% theo mặc định. Nếu 50% nhỏ hơn 45ch, thì chiều rộng sẽ sử dụng 45ch và nếu 50% rộng hơn 75ch, thì khung này sẽ sử dụng 75ch.

Bạn cũng có thể phân tách chỉ bằng min() hoặc max(). Nếu bạn muốn phần tử luôn có chiều rộng 50% và không vượt quá 75ch chiều rộng trên màn hình lớn hơn, hãy sử dụng width: min(75ch, 50%); để đặt kích thước tối đa.

Tương tự như vậy, bạn có thể đặt kích thước tối thiểu cho văn bản dễ đọc bằng cách sử dụng hàm max(), như trong width: max(45ch, 50%);. Ở đây, trình duyệt sẽ chọn bất kỳ giá trị nào lớn hơn, nghĩa là phần tử đó phải từ 45ch trở lên.

Quản lý khoảng đệm

Bạn cũng có thể dùng max() để đặt kích thước khoảng đệm tối thiểu. Ví dụ này lấy từ CSS Tricks, trong đó độc giả Caluã de Lacerda Pataca đã chia sẻ ý tưởng: Cho một phần tử có thêm khoảng đệm ở kích thước màn hình lớn hơn, nhưng giữ khoảng đệm tối thiểu ở kích thước màn hình nhỏ hơn. Để thực hiện việc này, hãy sử dụng calc() hoặc max() và trừ đi khoảng đệm tối thiểu ở cả hai bên của phần tử: calc((100vw - var(--contentWidth)) / 2) hoặc max(2rem, 50vw - var(--contentWidth) / 2). Trong biểu định kiểu của bạn, nhãn này sẽ có dạng như sau:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Kiểu chữ linh hoạt

Để bật kiểu chữ linh hoạt, Mike Riethmeuller đã phổ biến một kỹ thuật sử dụng hàm clamp() để đặt kích thước phông chữ tối thiểu, cỡ chữ tối đa và cho phép điều chỉnh tỷ lệ giữa các kích thước đó.

Trước khi clamp(), thiết kế tỷ lệ phông chữ, bạn phải có các chuỗi kiểu phức tạp. Giờ đây, bạn có thể để trình duyệt làm thay bạn. Đặt kích thước phông chữ tối thiểu được chấp nhận (ví dụ: 1.5rem cho tiêu đề), kích thước tối đa (chẳng hạn như 3rem) và kích thước lý tưởng (chẳng hạn như 5vw). Giờ đây, bạn sẽ có kiểu chữ điều chỉnh theo tỷ lệ theo chiều rộng khung nhìn của trang cho đến khi đạt đến giá trị tối thiểu và tối đa giới hạn, sử dụng rất ít mã:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Tài nguyên khác

• Các giá trị và đơn vị CSS trên MDN
• Quy cách cấp 4 về giá trị CSS và đơn vị
• Bài viết về các thủ thuật CSS về chiều rộng của phần tử bên trong
• Tổng quan về min(), max(), clamp() của Ahmad Shadeed

Ảnh bìa của @yer_a_wizard trên Unsplash.