Functions

Tidak semua nilai CSS ditulis sebagai angka atau kata kunci yang mati. Sebuah function di CSS adalah nilai yang dihitung browser saat stylesheet diproses: kita memberi masukan di dalam tanda kurung, dan browser menghasilkan nilai akhirnya. Pola ini telah sering kita temui — rgb(14 165 233) adalah function yang menyusun warna dari tiga kanal. Kemampuan mengenali function penting karena hampir semua fitur modern CSS, dari warna hingga layout adaptif, disajikan dalam bentuk function. Chapter ini memetakan function yang paling sering dipakai, lalu menggabungkan beberapa di antaranya dalam satu demo.

Peta Function yang Sering Dipakai #

MDN: CSS functions mendokumentasikan puluhan function; tabel berikut memuat yang paling sering kita temui:

Function dapat disarangkan di dalam function lain: rgb(0 0 0 / var(--alpha)) memakai hasil var() sebagai kanal alpha. Pola penyusunan ini yang membuat sistem desain tetap ringkas — satu custom property diubah, dan seluruh turunan nilai ikut menyesuaikan. Detail var() kita bedah pada Chapter Custom Properties , sedangkan calc(), min(), max(), dan clamp() mendapat chapter tersendiri pada calc(), min(), max(), dan clamp() .

Waktu evaluasi function berbeda-beda. Warna dan url() diselesaikan saat gaya dihitung, sementara function yang melibatkan persen atau satuan relatif — seperti calc(100% - 40px) — dievaluasi ketika browser mengetahui ukuran nyata elemennya. Karena itu, dua halaman yang sama bisa menghasilkan nilai akhir berbeda bila viewport-nya berbeda.

Membaca Nilai Function di DevTools #

Buka tab Elements pada DevTools, pilih elemen, lalu perhatikan panel Computed: nilai min(60%, 240px) tampil sebagai hasil akhirnya, misalnya 240px, bukan sebagai ekspresi. Kebiasaan memeriksa panel Computed membantu kita memastikan function yang ditulis benar-benar menghasilkan nilai yang dimaksud — kebiasaan yang sama yang kita manfaatkan lewat penanda data-expected pada demo.

Satu hal yang perlu diketahui: function di CSS berasal dari spesifikasi, dan kita tidak dapat membuat function sendiri sebagaimana kita mendefinisikan fungsi di bahasa pemrograman. Usulan custom function @function sedang dibangun, tetapi saat ini dukungannya masih terbatas pada browser Chromium; sampai statusnya jelas, kembalilah pada function bawaan dan custom properties untuk menata nilai yang dapat digunakan ulang.

Demo: Menggabungkan Beberapa Function #

Demo berikut memakai empat function pada satu halaman:

.kotak-min {
  width: min(60%, 240px);
}
.kotak-max {
  width: max(50%, 100px);
}
.badge {
  background-color: hsl(0 100% 50%);
}
.teks {
  color: rgb(14 165 233);
}

Mari kita telaah baris demi baris:

1. Baris 1–3 (.kotak-min): min() membandingkan 60% dari arena 400px (240px) dengan 240px, lalu memilih yang terkecil — hasilnya 240px.
2. Baris 4–6 (.kotak-max): max() membandingkan 50% dari 400px (200px) dengan 100px, lalu memilih yang terbesar — hasilnya 200px.
3. Baris 7–9 (.badge): hsl(0 100% 50%) menyusun merah murni dari hue 0 derajat, saturation penuh, dan lightness 50%.
4. Baris 10–12 (.teks): rgb(14 165 233) menyusun biru langit langsung dari tiga kanal.

Hasil di Browser:

Di dalam arena 400px: kotak min() tampil selebar 240px
(60% = 240px, sama dengan batas kedua), kotak max() tampil
selebar 200px (50% = 200px lebih besar dari 100px).
Badge berlatar merah murni rgb(255, 0, 0) dari hsl(0 100% 50%),
teks tampil biru langit rgb(14, 165, 233).

Contoh pemakaian url() tidak ikut diuji karena nilai computed-nya berupa alamat berkas, bukan panjang atau warna; bentuk pemakaiannya adalah background-image: url("hero-kota.png"). Empat nilai lainnya pada demo membawa penanda data-expected, sehingga hasil perhitungan min(), max(), hsl(), dan rgb() diperiksa langsung oleh harness Course pada headless browser.