Custom Properties

Sampai titik ini, setiap nilai yang kita tulis berlaku hanya pada selektor tempat nilai itu ditulis. Custom properties membuka mekanisme baru: kita menyimpan nilai pada sebuah nama yang diawali dua tanda hubung, misalnya --warna-utama, lalu membaca nama tersebut dari selektor mana pun melalui var(). Warna tema, jarak antar-komponen, dan ukuran teks berhenti menjadi angka yang tersebar — semuanya terkumpul di satu tempat dan dapat diubah sekaligus. Chapter ini membahas cara mendefinisikan dan memakai custom properties, perilaku nilainya, serta jebakan yang perlu kita waspadai.

Mendefinisikan dan Memakai Custom Property #

Sebuah custom property dideklarasikan seperti properti biasa, tetapi namanya diawali -- dan nilainya dapat berupa nilai CSS apa saja. Konvensi yang lazim adalah menempatkan seluruh variabel tema pada selektor :root agar tersedia di seluruh dokumen, karena :root adalah leluhur tertinggi semua elemen:

:root {
  --warna-utama: rgb(2, 132, 199);
  --ukuran-teks: 20px;
}
.kartu {
  --aksen: rgb(22, 163, 74);
}
.teks-utama {
  color: var(--warna-utama);
  font-size: var(--ukuran-teks);
}
.teks-aksen {
  color: var(--aksen);
}

Mari kita telaah baris demi baris:

1. Baris 1–4 (:root): dua custom properties didefinisikan pada akar dokumen — satu warna dan satu panjang.
2. Baris 5–7 (.kartu): --aksen didefinisikan hanya di dalam kartu, sehingga nilainya hanya terbaca oleh turunan kartu tersebut.
3. Baris 8–11 (.teks-utama): var(--warna-utama) menggantikan dirinya dengan nilai custom property saat browser menghitung gaya; hasilnya teks biru 20px.
4. Baris 12–14 (.teks-aksen): aturan ini membaca --aksen; bila elemennya berada di dalam .kartu, nilai yang terbaca adalah hijau.

Nama custom properties peka huruf besar-kecil: --Warna-Utama dan --warna-utama adalah dua variabel berbeda. Dokumentasi lengkapnya ada di MDN: –* dan MDN: var() .

Fallback dan Pewarisan #

var() menerima argumen kedua sebagai nilai cadangan: var(--warna-langka, rgb(220, 38, 38)) menghasilkan merah bila --warna-langka tidak didefinisikan di mana pun. Cadangan ini membuat komponen siap pakai tetap tampil wajar meskipun variabel temanya belum disetel.

Custom properties diwariskan seperti properti lain. Nilai yang didefinisikan pada :root terbaca oleh seluruh pohon dokumen, sedangkan nilai yang didefinisikan pada .kartu hanya berlaku untuk kartu dan turunannya; elemen di luar kartu tetap membaca nilai dari leluhurnya masing-masing. Perlu diingat, nilai dihitung pada elemen pemakai, bukan pada tempat variabel didefinisikan — font-size: var(--ukuran, 1em) pada elemen berfont 12px menghasilkan nilai dari konteks elemen tersebut.

Pewarisan inilah fondasi teknik tema (theming): satu kumpulan variabel didefinisikan di :root sebagai tema bawaan, lalu selektor seperti [data-tema="gelap"] menimpa hanya variabel yang berubah. Seluruh komponen yang membaca variabel tersebut menyesuaikan dirinya tanpa satu pun aturan warna baru, dan strategi lengkapnya kita praktikkan pada Chapter tema di ujung Course ini.

Demo: Membaca dan Mewarisi Variabel #

Demo pada chapter ini menerapkan file tema di atas beserta dua kasus tambahan: var() dengan cadangan, dan variabel yang dibaca di luar cakupannya. Hasil di Browser:

Teks utama tampil biru rgb(2, 132, 199) berukuran 20px dari
custom properties di :root.
Teks cadangan tampil merah rgb(220, 38, 38) karena --warna-langka
tidak didefinisikan sehingga nilai cadangan var() dipakai.
Teks aksen di dalam kartu tampil hijau rgb(22, 163, 74).
Teks di luar kartu kembali ke warna warisan body rgb(15, 23, 42)
karena --aksen tidak tersedia di sana (invalid at computed-value time).

Lima nilai warna dan ukuran tersebut terverifikasi otomatis melalui penanda data-expected pada demo; harness Course memeriksa nilai computed color dan font-size di headless browser. Ganti salah satu nilai di :root pada demo dan seluruh elemen pemakainya ikut berubah — kekuatan utama custom properties yang akan terus kita pakai hingga Chapter tema dan design system.

:root {
  --warna-utama: rgb(2, 132, 199);
  --ukuran-teks: 20px;
}
.kartu {
  --aksen: rgb(22, 163, 74);
}
.teks-utama {
  color: var(--warna-utama);
  font-size: var(--ukuran-teks);
}
.teks-aksen {
  color: var(--aksen);
}