CSS Custom Properties Lanjut

Ringkasan

Custom properties (--nama) adalah variabel CSS asli, bisa diubah saat runtime & di-inherit — kunci theming modern.

Konsep Dasar

• Deklarasi: --brand: #0af;; pakai: color: var(--brand).
• var(--x, fallback) — nilai cadangan bila --x kosong.
• Inheritance: turun ke child (seperti color).
• @property --x { syntax:'<color>'; inherits:true; initial-value:red } → bisa di-transition & tipe aman.
• Theming: set --brand di :root (light) dan [data-theme="dark"] (dark).

Cara Kerja / Struktur

css

:root { --brand: #0af; --gap: 1rem; }
[data-theme="dark"] { --brand: #08c; }
.btn { background: var(--brand, #999); padding: var(--gap); }
@media (prefers-color-scheme: dark) { :root { --brand:#08c; } }

Catatan Implementasi

• Pakai -- untuk design token (warna, spacing, radius).
• @property bikin transition halus & cegah nilai salah tipe.
• JS bisa baca/ubah via getComputedStyle/style.setProperty.

Kesalahan Umum

• Lupa fallback di var() → kosong saat var tak terdefinisi.
• Nama tanpa -- prefix (harus --nama).

Glosarium

• Design token: variabel desain terpusat.
• @property: deklarasi tipe aman untuk custom property.

Referensi

• CSS Typography, Variables, Pseudo
• CSS Color, Contrast, Dark Mode