CSS min(), max(), dan clamp()

Pelajari cara mengontrol ukuran elemen, mempertahankan spasi yang tepat, dan menerapkan tipografi yang fleksibel menggunakan fungsi CSS yang didukung dengan baik ini.

Una Kravets

Seiring desain responsif menjadi lebih beragam, CSS terus berkembang untuk memberikan kontrol yang lebih besar kepada penulis. Fungsi min(), max(), dan clamp(), yang kini didukung di semua browser modern, adalah salah satu alat terbaru dalam membuat situs dan aplikasi penulisan lebih dinamis dan responsif. Anda dapat menggunakan fungsi ini untuk mengontrol ukuran dan pengubahan ukuran elemen, mempertahankan spasi antar elemen, dan membuat tipografi yang fleksibel dan lancar.

Fungsi matematika, calc(), min(), max(), dan clamp() memungkinkan ekspresi matematika dengan penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/) digunakan sebagai nilai komponen

Nilai CSS dan Unit Tingkat 4

Dukungan browser

min()

max()

clamp()

Penggunaan

Anda dapat menggunakan min(), max(), dan clamp() di sisi kanan ekspresi CSS mana pun yang memungkinkan. Untuk min() dan max(), Anda memberikan daftar nilai argumen, dan browser menentukan mana yang terkecil atau terbesar. Misalnya, dalam kasus width: min(1rem, 50%, 10vw), browser menghitung unit relatif mana yang terkecil dan menggunakan nilai tersebut untuk lebar elemen.

Fungsi max() melakukan hal yang sama untuk nilai maksimum.

Untuk menggunakan clamp(), masukkan tiga nilai: nilai minimum, nilai ideal untuk dihitung, dan nilai maksimum.

Anda dapat menggunakan fungsi ini di mana saja <length>, <frequency>, <angle>, <time>, <percentage>, <number>, atau <integer> diizinkan. Anda dapat menggunakannya sendiri (seperti dalam font-size: max(0.5vw, 50%, 2rem)), dengan calc() (seperti dalam font-size: max(calc(0.5vw - 1em), 2rem)), atau disusun (seperti dalam font-size: max(min(0.5vw, 1em), 2rem)).

Berikut adalah beberapa contoh cara menggunakan fungsi ini.

Lebar yang sempurna

Menurut The Elements of Typographic Style oleh Robert Bringhurst, "segala sesuatu dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman kolom tunggal yang ditetapkan dalam tampilan teks serif dalam ukuran teks."

Untuk memastikan blok teks Anda tetap memiliki lebar antara 45 dan 75 karakter, gunakan unit clamp() dan ch (character advance lebar 0):

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

Tindakan ini memungkinkan browser menentukan lebar paragraf. Ini menetapkan lebar ke 50% secara default. Jika 50% lebih kecil dari 45ch, lebarnya akan menggunakan 45ch, dan jika 50% lebih lebar dari 75ch, lebarnya akan menggunakan 75ch.

Anda juga dapat membaginya hanya menggunakan min() atau max(). Jika Anda ingin elemen selalu memiliki lebar 50%, dan tidak melebihi lebar 75ch pada layar yang lebih besar, gunakan width: min(75ch, 50%); untuk menetapkan ukuran maksimum.

Dengan cara yang sama, Anda dapat menyetel ukuran minimum untuk teks yang dapat dibaca menggunakan fungsi max(), seperti dalam width: max(45ch, 50%);. Di sini, browser memilih nilai mana pun yang lebih besar, yang berarti elemen harus berukuran 45ch atau lebih lebar.

Mengelola padding

Anda juga dapat menggunakan max() untuk menetapkan ukuran padding minimum. Contoh ini berasal dari CSS Tricks, tempat pembaca Caluã de Lacerda Pataca membagikan ide ini: Biarkan elemen memiliki padding tambahan pada ukuran layar yang lebih besar, tetapi pertahankan padding minimum pada ukuran layar yang lebih kecil. Untuk melakukannya, gunakan calc() atau max() dan kurangi padding minimum dari kedua sisi elemen: calc((100vw - var(--contentWidth)) / 2), atau max(2rem, 50vw - var(--contentWidth) / 2). Di sheet gaya, kodenya akan terlihat seperti ini:

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

Tipografi adaptif

Untuk mengaktifkan tipografi fleksibel, Mike Riethmeuller mempopulerkan teknik yang menggunakan fungsi clamp() untuk menetapkan ukuran font minimum, ukuran font maksimum, dan memungkinkan penskalaan di antara ukuran tersebut.

Sebelum clamp(),, desain penskalaan font memerlukan string gaya yang kompleks. Sekarang, Anda dapat membiarkan browser melakukan pekerjaan untuk Anda. Tetapkan ukuran font minimum yang dapat diterima (misalnya, 1.5rem untuk judul), ukuran maksimum (seperti 3rem), dan ukuran ideal (seperti 5vw). Sekarang Anda memiliki tipografi yang diskalakan dengan lebar viewport halaman hingga mencapai nilai minimum dan maksimum yang membatasi, menggunakan kode yang sangat sedikit:

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

Referensi lainnya

• Nilai dan Unit CSS di MDN
• Nilai CSS dan Spesifikasi Tingkat 4 Unit
• Artikel CSS Tricks tentang Lebar Elemen Dalam
• Ringkasan min(), max(), clamp() oleh Ahmad Shadeed

Gambar sampul dari @yer_a_wizard di Unsplash.