← CSS45 / 62

Nilai fallback pada var()

var(--nama, nilaiCadangan) memakai nilai cadangan jika variabelnya belum terdefinisi. Ini penting saat membangun komponen yang bisa dikustomisasi: komponenmu tetap tampil benar walau pengguna tidak menyetel variabelnya. Nilai cadangannya boleh berupa variabel lain, misalnya var(--pad, var(--pad-dasar, 8px)), sehingga kamu bisa menyusun rantai prioritas.

👀 Contoh dulu

/* --gap belum didefinisikan, jadi 8px yang dipakai */
.daftar { gap: var(--gap, 8px); }

/* pengguna komponen bisa menimpanya kapan saja */
.daftar-rapat { --gap: 2px; }

Hasilnya: .daftar berjarak 8px (dari fallback), sedangkan .daftar-rapat berjarak 2px karena variabelnya disetel.

💡 Pola ini membuat komponenmu punya default yang aman tapi tetap bisa dikustomisasi dari luar.

📝 Sekarang giliranmu

Pada .kartu, atur padding menjadi var(--pad, 16px) — variabel --pad sengaja belum dideklarasikan, jadi fallback-nya yang berlaku.

Preview
← SebelumnyaBerikutnya →