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 thích hợp và triển khai kiểu chữ linh hoạt bằng các hàm CSS được hỗ trợ tốt này.

Una Kravets

Khi thiết kế thích ứng trở nên tinh tế hơn, CSS không ngừng phát triển để giúp tác giả tăng cường quyền kiểm soát. Các hàm min(), max() và clamp() hiện được hỗ trợ trong tất cả trình duyệt hiện đại, là một trong những công cụ mới nhất giúp trang web và ứng dụng của bạn linh độ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ử và tạo kiểu chữ linh hoạt và uyển chuyển.

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

Giá trị và đơn vị CSS 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 mọi biểu thức CSS nếu phù hợp. Đối với min() và max(), bạn cung cấp một danh sách đối số các giá trị để trình duyệt 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 trong số này và sử dụng giá trị đó cho chiều rộng của phần tử.

Hàm max() cũng làm tương tự đối với giá trị tối đa.

Để sử dụng clamp(), hãy nhập ba 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 cho phép <length>, <frequency>, <angle>, <time>, <percentage>, <number> hoặc <integer>. Bạn có thể sử dụng riêng các thành phần 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 Các yếu tố của kiểu chữ của Robert Bringhurst, "bất kỳ giá trị nào từ 45 đến 75 ký tự được coi là độ dài phù hợp của dòng cho trang một cột được đặt trong mặt văn bản có serif ở kích thước văn bản".

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

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

Thao tác này cho phép trình duyệt xác định chiều rộng của đoạn văn bản. Theo mặc định, thuộc tính này đặt chiều rộng thành 50%. Nếu 50% nhỏ hơn 45ch, thì chiều rộng sẽ sử dụng 45ch và nếu 50% lớn hơn 75ch, thì chiều rộng sẽ sử dụng 75ch.

Bạn cũng có thể chia nhỏ mã này 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á chiều rộng 75ch 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, có 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ể sử dụng max() để đặt kích thước khoảng đệm tối thiểu. Ví dụ này được lấy từ CSS Tricks, trong đó người đọc Caluã de Lacerda Pataca đã chia sẻ ý tưởng này: Cho phép một phần tử có khoảng đệm bổ sung ở 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ừ khoảng đệm tối thiểu từ 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, biểu mẫu sẽ có dạng như sau:

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

Kiểu chữ linh hoạt

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

Trước clamp(),, việc thiết kế tỷ lệ phông chữ yêu cầu các chuỗi kiểu phức tạp. Bây giờ, bạn có thể để trình duyệt thực hiện công việc cho mình. Đặ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 có kiểu chữ theo tỷ lệ với chiều rộng khung nhìn của trang cho đến khi đạt đến các giá trị tối thiểu và tối đa giới hạn, bằng cách sử dụng rất ít mã:

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

Tài nguyên khác

• Giá trị CSS và đơn vị trên MDN
• Giá trị CSS và quy cách đơn vị cấp 4
• Bài viết về thủ thuật CSS về Chiều rộng 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.