Belajar CSS - CSS Functions dan Kalkulasi Dinamis
Episode ini membahas CSS functions dan kalkulasi dinamis: operasi aritmetika dengan calc, pemilihan nilai dengan min dan max, batas fluid dengan clamp, serta minmax untuk grid dan fungsi bernilai lain yang menghitung ukuran di runtime.
#Pendahuluan
Episode 10 memakai clamp() untuk ukuran fluid. Episode 16 membuka kotak penuh CSS functions: keluarga fungsi matematika yang menghitung nilai di runtime — calc(), min(), max(), dan clamp() — plus minmax() yang spesifik untuk Grid.
CSS biasanya mengandalkan nilai statis yang ditulis tangan. Dengan fungsi ini, kalian bisa mengekspresikan relasi: sidebar selebar 25% tetapi tidak lebih dari 300px, atau padding yang mengalir antara 16px dan 48px.
Mengapa penting? Fungsi matematika menggantikan banyak media query dan kalkulasi manual. Kode menjadi lebih pendek, lebih presisi, dan tetap bekerja saat nilai di sekitarnya berubah — misalnya saat custom properties ikut berubah.
#calc: Aritmetika Antar Unit
calc() menghitung operasi penjumlahan, pengurangan, perkalian, dan pembagian antar nilai, termasuk antar unit berbeda:
.sidebar {
width: calc(25% - 16px);
}
.konten {
margin-top: calc(48px + 1rem);
}
.banner {
width: calc(100vw - 100%);
}calc(25% - 16px) mengurangi jarak tetap dari lebar persen. Operator + dan - wajib dikelilingi spasi; tanpa spasi, ekspresi dianggap tidak valid. Perkalian dan pembagian tidak memerlukan spasi, tetapi menuliskannya tetap dianjurkan agar terbaca.
.kartu {
padding: calc(var(--jarak) * 1.5);
width: calc(100% - var(--jarak-samping) * 2);
}calc() menerima custom properties di dalamnya. Ini membuat spacing dan dimensi dapat diskalakan dari satu variabel — misalnya padding yang selalu satu setengah kali jarak dasar.
#min dan max: Memilih Nilai
min() memilih nilai terkecil dari daftar; max() memilih yang terbesar:
.gambar {
width: min(100%, 640px);
}
.hero {
min-height: max(60vh, 480px);
}
.teks {
font-size: max(1rem, 1.2vw);
}min(100%, 640px) membaca "selebar mungkin, tetapi tidak lebih dari 640px" — pengganti bersih kombinasi width: 100% dan max-width. max(60vh, 480px) memastikan tinggi tidak pernah lebih kecil dari 480px. Keduanya bisa berisi banyak argumen dan unit campuran.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}minmax() khusus untuk Grid mendefinisikan rentang ukuran track: minimum 200px, lalu tumbuh hingga 1fr. Bersama auto-fit, track menyesuaikan jumlah kolom secara otomatis dengan ruang yang ada — salah satu pola Grid responsif yang paling berguna.
#clamp: Nilai dalam Rentang
clamp(min, pilihan, max) adalah penggabungan max(min()) dan min(max()) dalam satu fungsi:
.judul {
font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
padding-inline: clamp(16px, 5vw, 64px);
}
.lebar-form {
width: clamp(280px, 60vw, 720px);
}Nilai tengah dipilih bila berada di antara batas; bila keluar rentang, nilai terdekat dengan batas yang dipakai. Gunakan unit relatif pada nilai tengah — vw, %, atau calc() — agar hasil berubah mengikuti viewport.
.teks-hero {
font-size: clamp(1rem, calc(1rem + 1vw), 1.5rem);
}Bila nilai tengah membutuhkan operasi, bungkus dengan calc(). clamp() sendiri menerima ekspresi calc() di dalamnya, sehingga kombinasi ini tetap valid dan dibaca seperti satu formula.
#Fungsi Nilai Lainnya
Selain matematika, CSS memiliki fungsi nilai yang berguna sehari-hari:
.item::before {
content: attr(data-ikon) " ";
}
[data-sisa="banyak"]::after {
content: " (" attr(data-sisa) " tersisa)";
}attr() membaca nilai atribut elemen dan memakainya sebagai konten. Bisa dipakai untuk menampilkan data kecil dari atribut data-* tanpa markup tambahan.
.artikel {
counter-reset: bagian;
}
.artikel h2::before {
counter-increment: bagian;
content: counter(bagian) ". ";
}counter() menomori elemen secara otomatis di CSS. Pasangan counter-reset dan counter-increment menghasilkan nomor berurutan tanpa menyimpan angka di HTML — berguna untuk bagian dokumen dan daftar.
#Latihan: Layout yang Menghitung Sendiri
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kalkulasi Dinamis</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layout">
<aside class="sidebar">Sidebar</aside>
<main class="utama">
<h1>Judul Fluid</h1>
<p>Konten yang ukurannya dihitung oleh fungsi CSS.</p>
</main>
</div>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.layout { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: clamp(16px, 3vw, 32px); padding-inline: clamp(16px, 5vw, 64px); max-width: 1200px; margin-inline: auto; min-height: 100vh; }
.sidebar { background-color: #f1f5f9; padding: 24px; border-radius: 12px; }
.utama h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1rem; }
.utama p { max-width: 60ch; font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem); }
@media (max-width: 640px) { .layout { grid-template-columns: 1fr; } }Jalankan npx serve . dan geser lebar jendela. Kolom sidebar dibatasi minmax, gap dan padding mengalir dengan clamp, dan judul menskalakan dirinya sendiri. Satu-satunya media query yang tersisa hanya mengatur jumlah kolom.
#Kesalahan Umum dan Solusinya
#Lupa Spasi pada Operator
calc(100%-16px) tidak valid. Operator + dan - membutuhkan spasi di kedua sisi; * dan / tidak, tetapi konsistensi spasi menjaga keterbacaan.
#Campur Unit yang Tidak Kompatibel
Tidak semua unit bisa dijumlahkan. calc(100% + 50px) valid untuk lebar, tetapi mencampur px dengan ch secara semantik kadang tidak masuk akal. Pahami satuan yang kalian gabungkan.
#Memaksa Semua ke Fungsi
Fungsi menambah kompleksitas. Nilai statis yang jelas tetap lebih baik daripada formula yang tidak perlu — gunakan calc dan kawan-kawan saat relasi antar nilai memang dinamis.
#Penutup
Inti yang harus dibawa pulang:
calc()menjalankan aritmetika antar unit yang berbeda.min()danmax()memilih batas terkecil atau terbesar dari daftar nilai.clamp(min, pilihan, max)menyatakan nilai fluid dalam satu fungsi.minmax()mendefinisikan rentang ukuran track Grid.attr()dancounter()menghasilkan nilai dari HTML secara dinamis.- Operator
+dan-padacalcwajib diberi spasi. Di episode 17 selanjutnya kita akan membahas filter, shadow, dan efek visual modern — bayangan bertingkat, blur, dan pengaturan warna gambar murni dengan CSS.