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ế đáp ứng trở nên tinh tế hơn, CSS không ngừng phát triển để giúp tác giả có nhiều quyền kiểm soát hơn. 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 việc tạo trang web và ứng dụng trở nê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 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à mượt mà.

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

Hàm max() cũng làm điều tương tự cho 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 (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 cuốn sách The Elements of Typographic Style (Các yếu tố của kiểu chữ) của Robert Bringhurst, "bất kỳ độ dài nào từ 45 đến 75 ký tự đều được coi là độ dài dòng phù hợp cho một trang một cột được đặt trong kiểu chữ có chân ở một cỡ chữ".

Để đảm bảo các khối văn bản của bạn có độ rộng từ 45 đến 75 ký tự, hãy sử dụng clamp() và đơn vị ch (ký tự tiến có chiều rộng bằ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. 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ì thành phần này sẽ sử dụng 45ch làm chiều rộng, còn nếu 50% rộng hơn 75ch, thì thành phần này sẽ sử dụng 75ch.

Bạn cũng có thể chia nhỏ bằng cách chỉ sử dụ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ự, bạn có thể đặt kích thước tối thiểu cho văn bản dễ đọc bằng hàm max(), như trong width: max(45ch, 50%);. Tại đây, trình duyệt sẽ chọn giá trị nào lớn hơn, tức là phần tử phải có kích thước 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 lấy từ CSS Tricks, trong đó độc giả Caluã de Lacerda Pataca đã chia sẻ ý tưởng này: Cho phép 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. Để làm việc này, hãy sử dụng calc() hoặc max() và trừ 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, mã 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 cỡ chữ tối thiểu, cỡ chữ tối đa và cho phép điều chỉnh tỷ lệ giữa các cỡ chữ đó.

Trước clamp(),, việc thiết kế tỷ lệ phông chữ đòi hỏi các chuỗi kiểu phức tạp. Giờ đây, bạn có thể để trình duyệt làm việc đó cho bạn. Đặt cỡ chữ tối thiểu có thể chấp nhận được (ví dụ: 1.5rem cho tiêu đề), cỡ chữ tối đa (chẳng hạn như 3rem) và cỡ chữ lý tưởng (chẳng hạn như 5vw). Giờ đây, bạn có kiểu chữ điều chỉnh 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

• Giá trị và đơn vị CSS trên MDN
• Thông số kỹ thuật cấp 4 về giá trị và đơn vị CSS
• 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