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

Matematika di dalam CSS

CSS punya fungsi kalkulasi bawaan. Tidak perlu JavaScript buat hitung ukuran dinamis.

calc(): operasi campuran

.konten {
  width: calc(100% - 240px); /* selebar induk dikurangi sidebar */
  padding: calc(1rem + 8px);  /* satuan beda bisa digabung */
}

Aturan penting: operator + dan - wajib dikelilingi spasi (calc(100%-20px) tidak valid!). Operator * dan / tidak butuh spasi tapi operannya harus angka murni.

min() dan max(): pilih batas

.kartu {
  width: min(600px, 90%);  /* yang terkecil: tidak lebih dari 600px, tapi 90% di HP */
}

.teks {
  font-size: max(16px, 1.2rem); /* yang terbesar: minimal 16px */
}

min() = "jangan lebih dari ini", max() = "jangan kurang dari ini". Pola min(600px, 90%) menggantikan banyak media query buat container responsif.

clamp(): tiga nilai sekaligus

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

clamp(MIN, IDEAL, MAX) = nilai ideal yang dijepit di antara batas bawah dan atas. Contoh di atas: font mengikuti lebar layar (fluid), tapi tidak lebih kecil dari 1.5rem dan tidak lebih besar dari 3rem.

Ini teknik fluid typography: teks membesar-mengecil mulus tanpa breakpoint.

Rumus fluid yang siap pakai

:root {
  --step-h1: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  --step-h2: clamp(1.4rem, 1.1rem + 1.5vw, 2.25rem);
  --step-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
body { font-size: var(--step-body); }

Simpan sebagai variabel dan seluruh tipografi situs jadi fluid konsisten.

minmax() di Grid

.galeri {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

Kombinasi minmax + min() memastikan kolom tidak overflow di layar sangat kecil (280px dijepit jadi 100% kalau layar lebih sempit).

Catatan teknis: fungsi-fungsi ini bisa bersarang: calc() di dalam clamp() di dalam var() semuanya valid. Tapi jangan sampai rumusnya tidak bisa dibaca manusia: kalau butuh komentar buat menjelaskan satu baris CSS, pertimbangkan memecahnya jadi variabel bernama yang jelas.

Rangkuman

calc buat operasi campuran (ingat spasinya!), min/max buat batas atas-bawah, clamp buat nilai fluid yang dijepit. Kombinasikan dengan variabel CSS buat sistem ukuran yang hidup dan responsif tanpa JavaScript.