Pengen kotak yang lebarnya "100% dikurangi 250px sidebar"? Pengen tulisan yang besarnya menyesuaikan layar (kecil di HP, besar di desktop) tanpa media query? Dulu butuh JavaScript atau Sass. Sekarang CSS punya fungsi matematika built-in: calc(), min(), max(), clamp(). Mereka kerja real-time di browser, otomatis re-calculate pas user resize window. Kalkulator yang hidup di stylesheet kamu.

💡 Resep magic responsive typography. font-size: clamp(1rem, 4vw, 2.5rem) — artinya: minimum 1rem, target 4% lebar viewport, maximum 2.5rem. Satu baris yang ngegantiin 5 media query buat heading responsive. Modern frontend dev wajib hafal trick ini.

calc() — menghitung nilai dengan operasi matematika:

.content {
  width: calc(100% - 250px); /* 100% dikurangi sidebar */
  padding: calc(8px + 1vw);
}

min() — memilih nilai terkecil:

.card {
  width: min(400px, 100%); /* maksimal 400px, tapi bisa lebih kecil */
}

max() — memilih nilai terbesar:

.sidebar {
  width: max(200px, 20%); /* minimal 200px */
}

clamp() — membatasi nilai antara minimum dan maksimum:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* minimal 1.5rem, ideal 4vw, maksimal 3rem */
}

🎭 Analogi sehari-hari

CSS functions = kalkulator built-in di CSS. calc() = matematika lurus. clamp() = "min, target, max" — fluid responsive tanpa breakpoint media query.

⚠️ Jebakan yang sering ditemui

• calc() butuh SPASI sekitar operator: calc(100% - 50px). calc(100%-50px) invalid.
• min()/max() confusing — min(400px, 100%) = ambil yang terkecil = MAX width 400px. max(200px, 20%) = ambil terbesar = MIN width 200px. Otaknya kebalik.
• clamp(MIN, IDEAL, MAX) = sweet spot fluid typography. Hapus banyak media query.
• Mix unit OK: calc(100vh - 60px) (vh + px). Browser handle conversion.
• Nested calc() valid tapi overkill. Refactor ke variable.
• calc() di property tertentu kadang glitchy (line-height).
• min()/max() browser support modern (2020+). Cek caniuse jika support legacy.

TL;DR: CSS Functions = matematika built-in real-time di browser. calc(100% - 250px) (mix unit OK). min(a, b) = ambil terkecil = MAX limit. max(a, b) = ambil terbesar = MIN limit. clamp(min, ideal, max) = magic responsive — hapus banyak media query. WAJIB spasi sekitar operator di calc() (100%-50px invalid). Kombinasi clamp() + viewport units = fluid typography.