calc(), min(), max(), dan clamp()

Kita sering butuh nilai yang tidak bisa ditulis sebagai satu angka utuh: lebar kolom adalah “sepenuh arena dikurangi jarak 40px”, atau ukuran teks yang membesar mengikuti layar tetapi berhenti di batas tertentu. CSS menjawab kebutuhan itu dengan empat function aritmetika: calc() menghitung ekspresi campuran satuan, min() dan max() memilih nilai terkecil atau terbesar, dan clamp() menahan sebuah nilai di antara batas bawah dan atas. Keempatnya bekerja pada properti apa pun yang menerima panjang, angka, atau persentase, dan dapat saling disarangkan. Chapter ini membahas masing-masing, lalu membuktikan perhitungannya lewat demo yang diuji otomatis.

calc(): Menghitung Nilai Campuran #

Function calc() menerima ekspresi dengan operator +, -, *, dan /, dan boleh mencampur satuan yang berbeda dalam satu ekspresi: persen bertemu piksel, rem bertemu vw. Browser menyelesaikan perhitungannya saat menghitung gaya, berdasarkan nilai nyata pada elemen tersebut. Deklarasi width: calc(100% - 40px) pada elemen di dalam arena 400px menghasilkan 360px — persen diselesaikan dulu menjadi 400px, lalu dikurangi 40px.

min(), max(), dan clamp() #

min() dan max() menerima dua argumen atau lebih dan memilih satu nilai: min(50%, 120px) menghasilkan 120px di dalam arena 400px karena 200px dikalahkan 120px. Kedua function ini menggantikan pola max-width ganda yang biasa kita tulis untuk membatasi lebar komponen.

clamp() merangkum keduanya dalam satu panggilan berformat clamp(min, preferred, max): nilai preferred dipakai selama berada di antara kedua batas, digeser ke min bila terlalu kecil, dan ke max bila terlalu besar. Secara perilaku, clamp(min, preferred, max) setara dengan max(min, min(preferred, max)). Deklarasi font-size: clamp(16px, 2vw, 20px) memberi tipografi fluida — teks tumbuh mengikuti viewport tetapi berhenti di 20px. Kombinasi clamp() dan vw seperti ini adalah resep standar untuk tipografi responsif.

Dua batasan operator perlu diingat. Perkalian dan pembagian hanya boleh melibatkan satu sisi bersatuan: calc(2 * 16px) valid, tetapi calc(16px * 8px) tidak, karena hasil kali dua satuan panjang tidak bermakna di CSS. Selain itu, keempat function ini paling efektif saat dipadukan dengan custom properties — calc(100% - var(--lebar-sidebar)) membuat satu nilai yang sering berubah tersimpan di satu tempat dan terbaca oleh banyak aturan.

Demo dan Bedah Kode #

Demo berikut memakai arena pasti berukuran 400px sebagai rujukan persen:

.kotak-calc {
  width: calc(100% - 40px);
}
.kotak-clamp {
  width: clamp(100px, 50%, 180px);
}
.judul-clamp {
  font-size: clamp(16px, 2vw, 20px);
}
.kotak-margin {
  width: 80px;
  margin-left: calc(10% + 20px);
}

Mari kita telaah baris demi baris:

1. Baris 1–3 (.kotak-calc): 100% dihitung dari lebar arena 400px, dikurangi 40px — hasilnya 360px.
2. Baris 4–6 (.kotak-clamp): nilai tengah 50% sama dengan 200px, melebihi batas atas 180px, sehingga clamp memotongnya menjadi 180px.
3. Baris 7–9 (.judul-clamp): pada viewport harness 1280px, 2vw bernilai 25.6px dan kembali melebihi batas atas, sehingga font-size menjadi 20px.
4. Baris 10–13 (.kotak-margin): margin kiri calc(10% + 20px) menghasilkan 40px + 20px = 60px, sementara lebar kotaknya tetap 80px.

Hasil di Browser:

Di dalam arena 400px: kotak calc() tampil selebar 360px (400 − 40).
Kotak clamp() tampil selebar 180px — nilai tengah 50% = 200px
melebihi batas atas, dipotong ke 180px.
Judul clamp() tampil berukuran 20px karena 2vw = 25.6px
melebihi batas atas.
Margin kiri kotak terakhir 60px (10% × 400px + 20px).

Kelima nilai di atas terverifikasi otomatis: elemen demo membawa penanda data-expected untuk width, font-size, dan margin-left, dan harness Course membandingkannya dengan nilai computed di headless browser. Untuk membuktikan sifat dinamisnya, kecilkan jendela browser: nilai berbasis vw pada demo turun, dan bila turun di bawah batas bawah, clamp() menahannya di 16px.