Fungsi CSS: calc(), min(), max(), dan clamp()

Sebagian besar waktu, kamu cuma memberi CSS nilai yang sudah pasti — width: 300px, font-size: 18px — dan selesai. Tapi tata letak di dunia nyata jarang serapi itu. Pasti ada momen ketika nilai yang kamu mau bukan sekadar satu angka yang bisa diketik, melainkan sebuah perhitungan: “lebar penuh, dikurangi sidebar ini,” atau “20% dari layar, tapi jangan sampai lebih kecil dari 16 piksel.” Bertahun-tahun, hal seperti ini cuma bisa dibereskan pakai JavaScript, atau ya sudah, dikira-kira saja.

Untungnya CSS punya jawaban yang lebih baik: fungsi matematika. Lewat calc(), min(), max(), dan clamp(), browser yang mengerjakan hitungannya untukmu, langsung saat layar berubah ukuran. Inilah rahasia di balik tata letak yang lentur tanpa satu baris JavaScript pun, dan begitu kamu paham, keempatnya bakal jadi bagian rutin dari kotak peralatanmu. Yuk kita bahas satu per satu.

calc(): menghitung langsung di dalam CSS

Fungsi calc() membolehkan kamu menulis ekspresi matematika sebagai sebuah nilai. Browser akan menghitungnya, lalu memakai hasilnya:

.box {
  width: calc(100% - 40px);
}

Itu dibaca sebagai “100% dari lebar yang tersedia, dikurangi 40 piksel.” Inilah keunggulan utama calc(): dia bisa mencampur satuan dengan bebas. Persen dengan piksel, rem dengan vw, em dengan px — hal-hal yang mustahil kamu gabung secara manual, karena cuma browser yang tahu 100% itu sama dengan berapa pada saat halaman dirender. Kamu tidak bisa menghitung sendiri 100% - 40px di awal; calc() bisa, secara langsung.

Kamu punya empat operator dasar:

.sidebar {
  width: calc(100% / 3);          /* tepat sepertiga */
}

.banner {
  height: calc(100vh - 80px);     /* tinggi penuh layar dikurangi header tetap */
}

.spacing {
  margin: calc(1rem + 5px);       /* satu rem ditambah beberapa piksel */
}

Pola 100vh - 80px itu sudah jadi klasik: sebuah hero section yang mengisi seluruh layar kecuali navbar tetap setinggi 80px yang nangkring di atasnya. Tidak perlu JavaScript untuk mengukur apa-apa — browser menjaganya tetap pas walau jendela diubah ukurannya.

Kamu bisa membungkus ekspresi dengan tanda kurung, bahkan menaruh calc() di dalam calc() (meski biasanya kurung biasa sudah cukup):

.card {
  width: calc((100% - 2 * 16px) / 3);   /* 3 kolom dengan dua celah 16px */
}

Di sini kamu membagi satu baris jadi tiga kolom sama rata sekaligus memperhitungkan celah di antaranya — pekerjaan yang sungguh menyebalkan kalau diketik manual, tapi sepele dengan ekspresi singkat.

min(): ambil nilai terkecil

min() menerima daftar nilai lalu memakai yang paling kecil pada saat itu. Awalnya terdengar terbalik, tapi fungsi ini luar biasa berguna untuk memasang batas atas:

.container {
  width: min(90%, 1200px);
}

Bacanya begini: “pakai 90% dari lebar yang tersedia, kecuali kalau itu melebihi 1200px — maka batasi di 1200px.” Di layar ponsel kecil, 90% adalah angka yang lebih kecil, jadi container-nya cair dan ikut menyesuaikan layar. Di monitor besar, 1200px yang jadi lebih kecil, jadi konten berhenti melebar dan tetap pada lebar yang nyaman dibaca. Satu baris ini menggantikan kombinasi width plus max-width plus media query.

.title {
  font-size: min(8vw, 64px);   /* ikut layar, tapi tak pernah lewat 64px */
}

Pintasan untuk diingat: min() memasang nilai maksimum. Karena dia selalu mengambil yang lebih kecil, nilai terbesar di dalam daftar berperan sebagai langit-langit yang tak akan pernah dilampaui hasilnya.

max(): ambil nilai terbesar

max() adalah kebalikannya — dia memakai nilai yang paling besar, sehingga pas untuk memasang batas bawah:

.text {
  font-size: max(16px, 2vw);
}

Ini artinya: “skalakan font mengikuti layar lewat 2vw, tapi jangan pernah biarkan turun di bawah 16px.” Di layar mungil, 2vw mungkin menghasilkan sekitar 8px — terlalu kecil untuk dibaca dengan nyaman — jadi max() jatuh kembali ke 16px yang lebih besar dan teksmu tetap terbaca. Di layar lebar, 2vw yang menang dan teksnya membesar.

.gutter {
  padding: max(1rem, 3vw);   /* padding nyaman yang tak pernah jadi sempit */
}

Pintasan di sini adalah kebalikan dari yang tadi: max() memasang nilai minimum. Dia selalu mengambil yang lebih besar, jadi nilai terkecil di daftar menjadi lantai yang tak akan pernah ditembus hasilnya.

clamp(): batas bawah, target, dan batas atas

Sekarang bintang utamanya. clamp() menggabungkan kedua ide tadi jadi satu fungsi yang elegan. Dia menerima tiga nilai — minimum, nilai yang diinginkan, dan maksimum:

.heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Urutannya selalu minimum, nilai yang diinginkan, maksimum, dan begini cara membacanya:

• Browser ingin memakai nilai tengah, 4vw — ukuran yang ikut menyesuaikan layar.
• Tapi dia tak akan pernah membiarkan hasilnya turun di bawah 1.5rem (batas bawah).
• Dan tak akan pernah membiarkannya naik di atas 3rem (batas atas).

Jadi di ponsel kecil, judulnya berada di batas bawah 1.5rem. Saat layar membesar, nilai 4vw mengambil alih dan teksnya membesar dengan mulus. Di monitor raksasa, dia berhenti di 3rem dan menolak jadi lebih besar lagi. Kamu mendapat tipografi cair yang mengalir alami di antara dua batas yang masuk akal — dan semuanya cukup dalam satu baris.

Inilah cara modern mengatur ukuran font responsif. Sebelum ada clamp(), kamu harus menulis ukuran dasar lalu menumpuk media query untuk menaikkannya di tiap breakpoint, sehingga perubahan ukurannya terasa meloncat seperti anak tangga. clamp() membuat perubahan itu berkelanjutan dan halus.

/* Jarak dan lebar yang cair juga bisa — bukan cuma font */
.section {
  padding-block: clamp(2rem, 6vw, 5rem);
}

.wrapper {
  width: clamp(320px, 90%, 1200px);
}

Menggabungkan fungsi

Fungsi-fungsi ini bisa disusun bersama. Kamu boleh menaruh ekspresi calc() di dalam min(), max(), atau clamp(), dan ini membuka aturan yang jauh lebih ekspresif:

.hero-title {
  /* batas bawah 2rem, skala cair, batas atas yang menyisakan ruang di layar besar */
  font-size: clamp(2rem, 1.5rem + 3vw, 4rem);
}

Nilai yang diinginkan itu, 1.5rem + 3vw, sebenarnya sudah sebuah perhitungan kecil — bagian tetap ditambah bagian yang relatif terhadap layar. (Perhatikan, kamu bahkan tidak perlu menulis calc() di sini; di dalam clamp(), min(), dan max(), ekspresi matematika langsung diperbolehkan.) Bentuk khusus ini — dasar rem ditambah kemiringan vw — adalah resep andalan untuk tipografi cair yang terasa seimbang, karena bagian tetapnya menjaga layar kecil tetap terbaca sementara bagian vw-nya menambah pertumbuhan.

Tata letak praktis

Sekarang kita rangkai jadi satu pembungkus konten yang benar-benar bakal kamu pakai di halaman nyata — cair, rata tengah, dan terbatasi:

.content {
  width: min(92%, 1100px);        /* cair, tapi mentok di 1100px */
  margin-inline: auto;            /* menengahkan */
  padding: clamp(1rem, 4vw, 2.5rem);
}

.content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

<main class="content">
  <h1>Selamat datang di ACY Partner Indonesia</h1>
  <p>Konten ini tetap nyaman dibaca di ponsel dan tetap rapi di desktop.</p>
</main>

Lihat berapa banyak yang kamu dapat dengan kode sesedikit itu: pembungkusnya mengisi layar di ponsel tapi tak pernah melebar lewat 1100px di desktop, padding-nya tumbuh mengikuti layar tapi tetap dalam batas wajar, dan judulnya membesar dengan mulus di antara batas bawah dan batas atas yang nyaman. Tidak ada satu pun media query, dan tidak ada satu baris JavaScript. Itulah kekuatan diam-diam dari fungsi matematika CSS.

Kalau kamu masih meraba-raba satuan mana yang cocok diberikan ke fungsi-fungsi ini — kapan pakai vw, rem, %, atau px — ada baiknya menengok dulu satuan CSS, karena fungsi ini cuma sebagus satuan yang kamu campurkan ke dalamnya. Dan begitu ukuranmu bisa menyesuaikan diri sendiri, kamu bakal jauh lebih jarang bersandar pada pendekatan penuh breakpoint dari desain responsif — banyak hal yang dulu butuh media query sekarang sudah… menyesuaikan ukurannya sendiri.

Dukungan browser dan jebakannya

Keempat fungsi ini sudah didukung sangat baik di semua browser modern, jadi kamu bisa memakainya dengan tenang sekarang. Beberapa hal yang perlu diingat:

• Spasi di calc() — seperti dibahas di atas, + dan - butuh spasi di kedua sisinya, setiap saat.
• Pembagian dengan nol — calc(100% / 0) tidak valid dan deklarasinya dibuang. Hati-hati kalau ada variabel yang bisa bernilai nol.
• Satuan tidak cocok — kamu tidak bisa menjumlahkan angka tanpa satuan dengan sebuah panjang: calc(10px + 5) itu tidak valid. Setiap suku yang butuh satuan harus punya satuan.
• Keterbacaan — ekspresi ini bisa jadi padat. Komentar singkat yang menjelaskan kenapa sebuah clamp() punya batas seperti itu bakal sangat menolong kamu di kemudian hari.

Penutup

Fungsi matematika CSS membiarkan browser menangani hitungan untukmu, secara langsung, saat tata letak berubah. Inilah jalan paling bersih menuju desain cair dan responsif tanpa JavaScript:

• calc() melakukan perhitungan dan, yang terpenting, membolehkan kamu mencampur satuan seperti % dan px. Selalu beri spasi pada + dan -.
• min() memilih nilai terkecil — pakai untuk memasang batas atas (langit-langit yang tak boleh dilewati).
• max() memilih nilai terbesar — pakai untuk memasang batas bawah (lantai yang tak boleh ditembus).
• clamp(min, diinginkan, max) menggabungkan keduanya jadi ukuran cair yang menyesuaikan di antara batas bawah dan batas atas — pas untuk tipografi dan jarak yang responsif.
• Semuanya bisa disusun bersama: taruh ekspresi matematika di dalam clamp(), min(), dan max() untuk nilai yang ekspresif dan menyesuaikan diri.

Kuasai keempatnya, dan satu kelas masalah tata letak langsung lenyap. Kamu berhenti menulis nilai piksel dan mulai menggambarkan hubungan — “sebesar ini, tapi jangan lebih besar dari itu” — lalu membiarkan browser membereskan sisanya. Lain kali kamu hendak meraih media query cuma untuk mengubah ukuran sesuatu, berhenti sejenak dan tanyakan apakah satu baris clamp() bisa menggantikannya.