Fungsi min(), max(), dan clamp()

Fungsi calc() memberi kita perhitungan bebas, tetapi hasil bebas juga berarti bisa membengkak tanpa kendali. CSS menjawabnya dengan tiga fungsi saudara: min() memilih nilai terkecil dari argumennya, max() memilih yang terbesar, dan clamp() menjepit sebuah nilai di antara batas bawah dan batas atas. Ketiganya didukung seluruh browser modern sejak Juli 2020, jadi aman dipakai di materi inti. Chapter ini membahas ketiganya, ditutup dengan contoh kanonik tipografi fluid tanpa satu baris media query pun.

min() dan max() #

min() menerima beberapa argumen dan selalu menghasilkan yang terkecil; max() menghasilkan yang terbesar:

.wadah-artikel {
  width: min(100% - 2rem, 640px);
}

.kotak-sorot {
  width: max(200px, 50%);
}

Perhatikan pembalikan nama yang sering membuat bingung: fungsi min() justru memegang peran batas atas, mirip dengan max-width, sedangkan max() memegang peran batas bawah, mirip dengan min-width. Tabel ini merangkumnya:

Cara membacanya: pada min(100% - 2rem, 640px) kita mengatakan “ambil yang lebih kecil”, sehingga 640px menjadi langit-langit. Pada max(200px, 50%) kita mengatakan “ambil yang lebih besar”, sehingga 200px menjadi lantai.

Dua kegunaan tambahan yang layak dicatat. Fungsi-fungsi ini tidak terbatas pada width: padding: max(1rem, 4vh) misalnya, menjaga jarak tetap terasa meskipun layarnya pendek. Selain itu, operasi hitung boleh ditulis langsung di dalam argumennya tanpa dibungkus calc() — contoh 100% - 2rem di atas adalah buktinya; menambahkan calc() pun diperbolehkan bila kalian merasa lebih terbaca.

Demo berikut menyandingkan min(400px, 80%) dengan tetangga tetap 400px di dalam wadah selebar 300px:

clamp(): Nilai Fluid dengan Dua Batas #

clamp() menerima tiga argumen berurutan: batas minimum, nilai ideal, dan batas maksimum.

.clamp-dasar {
  width: clamp(240px, 50%, 480px);
}

Secara matematis clamp(min, ideal, max) ekuivalen dengan max(min, min(ideal, max)) — nilai ideal dijepit dari dua arah.

Contoh Kanonik: Tipografi Fluid #

Kombinasi tiga fungsi ini menghasilkan pola paling terkenal, ukuran huruf yang mengikuti lebar layar dengan batas aman:

h1 {
  font-size: clamp(1rem, 0.9rem + 1vw, 1.5rem);
}

Mari kita uraikan baris demi baris:

1. 1rem — batas bawah. Pada layar sempit, judul tidak pernah lebih kecil dari ukuran font dasar root, sehingga tetap terbaca dan tetap menghormati preferensi pengguna.
2. 0.9rem + 1vw — nilai ideal yang bergerak. Komponen 0.9rem menjadi dasar yang stabil, sementara 1vw menambah sekitar satu persen lebar viewport sehingga judul tumbuh pelan mengikuti layar.
3. 1.5rem — batas atas. Pada layar sangat lebar, pertumbuhan berhenti dan judul tidak membengkak.

Tidak ada @media yang ditulis — browser yang melakukan seluruh perhitungan. Pola clamp(1rem, 0.9rem + 1vw, 1.5rem) inilah bentuk paling umum tipografi fluid dan layak dijadikan titik awal untuk disesuaikan di setiap proyek.

Perhatikan juga pilihan satuannya: batas bawah dan batas atas ditulis dalam rem, bukan px. Dengan begitu kedua batas ikut membesar bila pengguna menaikkan ukuran font dasarnya, dan judul fluid tetap proporsional terhadap teks lain di halaman. Menulis batas dalam px akan mengunci rentang tersebut dan mengabaikan preferensi itu.

Dua wadah dengan lebar berbeda memuat elemen dengan width: max(180px, 50%), ditambah judul fluid di bawahnya:

Elemen yang sama, hasil berbeda — fungsi ini memang menghitung dari konteks.

Kesalahan Umum #

Ringkasan #

min() memilih argumen terkecil, max() memilih yang terbesar, dan clamp() menjepit nilai ideal di antara dua batas — ketiganya menghitung ulang secara langsung tanpa media query. Dengan clamp() kita mendapatkan tipografi fluid yang tetap hormat pada preferensi pengguna karena batasnya ditulis dalam rem. Selanjutnya kita berpindah dari ukuran yang ditentukan angka ke ukuran yang ditentukan konten itu sendiri: kata kunci intrinsic sizing seperti max-content dan fit-content.