CSS bisa berhitung sendiri. calc(), min(), max(), dan clamp() adalah function (nama, lalu tanda kurung berisi masukan) yang menghasilkan sebuah ukuran, dan browser menghitungnya ulang tiap kali ruangnya berubah. Gunanya buat ukuran yang bergantung pada ruang, misalnya "lebar sisa sesudah sidebar".
🧪 Tebakan cepat:
width: calc(100%-250px)tanpa spasi, jalan gak? Tebak dulu, jawabannya ada di bagian "Berhitung dengancalc()".
Berhitung dengan calc()
<div class="layout">
<aside class="sidebar">Sidebar</aside>
<div class="content">Konten</div>
</div>
<style>
.layout { display: flex; }
.sidebar { width: 250px; }
.content { width: calc(100% - 250px); }
</style>
calc( ... )adalah function buat berhitung. Isinya satu rumus.100%adalah lebar penuh parent-nya,.layout.- 250pxmengurangi lebar sidebar. Satuannya boleh dicampur: persen dikurangi piksel.
Hasilnya, kalau .layout selebar 1000px, .content jadi 750px. Kalau .layout menyempit jadi 600px, .content ikut jadi 350px. Sidebar tetap 250px, konten mengisi sisanya.
Jawaban tebakan: gak jalan. Tanda + dan - di dalam calc() wajib diapit spasi. Tanpa spasi, -250px dibaca sebagai angka negatif, bukan pengurangan, jadi seluruh nilainya gak valid dan dibuang browser. Tulis calc(100% - 250px).
Ambil yang terkecil atau terbesar: min() dan max()
.kartu { width: min(400px, 100%); }
.menu { width: max(200px, 20%); }
min(400px, 100%)memakai nilai yang paling kecil. Di parent selebar 1000px, 100% = 1000px, jadi yang dipakai 400px. Di layar HP selebar 300px, 100% = 300px, lebih kecil dari 400px, jadi lebarnya 300px.max(200px, 20%)memakai nilai yang paling besar. Di parent 600px, 20% = 120px, jadi yang dipakai 200px.
Namanya terasa kebalik: min() memasang batas atas (paling lebar 400px), max() memasang batas bawah (paling sempit 200px).
Jepit di antara dua batas: clamp()
.judul { font-size: clamp(1rem, 4vw, 3rem); }
clamp() berisi tiga nilai: batas bawah, nilai ideal, batas atas.
1remadalah ukuran paling kecil.remmengikuti ukuran huruf dasar halaman, biasanya 16px.4vwadalah nilai idealnya.1vwsama dengan 1% lebar viewport (layar), jadi4vwitu 4% lebar layar.3remadalah ukuran paling besar, biasanya 48px.
Hasilnya, di layar 1000px, 4vw = 40px, masih di antara batas, jadi hurufnya 40px. Di layar 300px, 4vw = 12px, terlalu kecil, jadi dipakai 16px. Di layar 1600px, 4vw = 64px, terlalu besar, jadi dipakai 48px. Judul membesar mengikuti layar tanpa media query, tapi gak pernah kekecilan atau kebesaran.
⚠️ Jebakan yang sering ketemu
- Lupa koma.
min(400px 100%)gak valid. Nilai di dalammin(),max(), danclamp()dipisah koma. - Angka tanpa satuan.
calc(100% - 20)gak valid, karena 20 tanpa satuan gak bisa dikurangkan dari lebar. Tulis20px. - Urutan
clamp()tertukar. Nilai pertama selalu batas bawah, terakhir batas atas. Kalau kebalik, kayakclamp(3rem, 4vw, 1rem), batas bawahnya selalu menang, jadi ukurannya gak pernah berubah.
TL;DR: calc(100% - 250px) berhitung dan boleh campur satuan, asal + dan - diapit spasi. min() memakai nilai terkecil, jadi bikin batas atas. max() memakai nilai terbesar, jadi bikin batas bawah. clamp(1rem, 4vw, 3rem) menjepit nilai ideal di antara batas bawah dan batas atas.
