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

Hitung ukuran langsung di dalam CSS.

Pahami konsepnya

calc() adalah kalkulator di tengah deklarasi: width: calc(100% - 240px) mengurangi piksel dari persen — dua satuan yang biasanya tak bisa dicampur. Aturannya longgar tapi tegas: operator + - * / dipisah spasi (calc(100%-240px) gagal karena minus melekat), dan hasil campuran satuan diselesaikan browser saat runtime. Kegunaan klasiknya: sidebar tetap + konten selebar "semua minus sidebar" tanpa float.

Tiga sepupu modern menyelesaikan kasus umum lebih ringkas. min(a, b) memilih terkecil: width: min(600px, 100%) aman di layar sempit. max(a, b) memilih terbesar: font-size: max(1rem, 14px) tak pernah jatuh di bawah 1rem. Dan clamp(min, ideal, max) menjepit nilai ideal di antara dua batas — clamp(1rem, 2.5vw, 1.5rem) berarti font mengikuti lebar layar tapi tak pernah lebih kecil 1rem atau lebih besar 1.5rem.

clamp() untuk ukuran adalah bentuk paling sederhana dari tipografi fluid — judul yang membesar mulus di layar lebar dan mengecil tertib di ponsel, tanpa satu pun media query. Fungsi attr() menutup daftar: ia membaca atribut HTML sebagai nilai, misalnya menampilkan angka data-harga lewat content: attr(data-harga) pada pseudo-element.

Coba contoh kode

.isi {
  width: calc(100% - 260px);      /* semua dikurangi sidebar */
  margin-left: 260px;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 3rem);  /* fluid dengan jepit */
}

.konten {
  width: min(680px, 90%);         /* tak pernah lebih lebar dari keduanya */
}

Tiga fungsi, tiga masalah usang tuntas: calc mencampur persen dan piksel untuk layout sidebar; clamp membuat judul berskala mulus antara 1.6rem dan 3rem mengikuti layar; min menjaga kolom bacaan tetap 680px di layar besar dan 90% di layar kecil. Resize jendela dan rasakan semuanya menyesuaikan tanpa titik henti.

Latihan singkat

Terapkan tipografi fluid clamp pada h1-h3, lebar konten min(680px, 92%), dan layout sidebar dengan calc — tanpa media query sama sekali.