Initial, Inherit, dan Unset

Kadang kita ingin mengatur ulang satu property secara sadar: mengembalikannya ke nilai semula, menyuruhnya ikut pewarisan, atau membiarkan browser menentukan. Untuk kebutuhan ini CSS menyediakan empat kata kunci global — initial, inherit, unset, dan revert — yang dapat dipakai pada semua property. Keempatnya terlihat mirip, tetapi hasilnya berbeda karena masing-masing mengambil nilai dari sumber yang berbeda. Chapter ini membedah arti presisi setiap kata kunci beserta pola pemakaiannya yang paling berguna.

Empat Kata Kunci, Empat Sumber Nilai #

unset bisa dibaca sebagai “pemilih otomatis”: ia meneladani perilaku alami property tersebut. Property yang memang mewarisi, seperti color, akan mengikuti induk; property yang tidak mewarisi, seperti border, kembali ke nilai awalnya.

initial Bukan Default Browser #

Titik paling rawan keliru ada pada initial. Nilai initial berasal dari tabel spesifikasi, bukan dari stylesheet bawaan browser. Contoh klasiknya adalah display: nilai initial-nya adalah inline, bukan block. Menulis display: initial pada elemen <div> membuatnya berperilaku seperti inline — bukan kembali menjadi blok seperti saat pertama kali ditulis.

Gaya yang biasa kita anggap “bawaan” — heading tebal, daftar bersimbol, div yang menjadi blok — sebagian besar datang dari stylesheet user-agent, bukan dari nilai initial. Tugas mengembalikan elemen ke gaya itu bukan milik initial, melainkan milik revert. Karena itu pola yang aman: pakai initial saat maksudnya benar-benar nilai awal spesifikasi, dan pakai revert saat maksudnya menghapus sentuhan CSS halaman kita sendiri.

revert dan revert-layer #

revert membatalkan deklarasi dari penulis halaman dan menarik nilai dari sumber sebelumnya: stylesheet user-agent atau preferensi pengguna. Ini berguna saat menimpa gaya library — deklarasi revert mengembalikan elemen ke tampilan dasar tanpa perlu mengetahui nilai yang perlu ditulis ulang.

Kata kunci modern revert-layer bekerja serupa tetapi batasnya satu layer: nilai ditarik kembali ke layer yang lebih rendah sesuai urutan @layer, bukan sampai ke stylesheet browser. Bagi tim yang memecah CSS ke dalam layer seperti reset, base, dan components, kata kunci ini menjadi saklar tingkat yang presisi. Pembahasan @layer yang lebih utuh kita simpan untuk section organisasi CSS.

Kapan Setiap Kata Kunci Berguna #

• color: inherit — menyatukan kembali teks dengan alur pewarisan setelah sebuah reset atau class utilitas mengatur warna lain. Contohnya teks di dalam tombol yang ingin mengikuti warna induknya.
• unset — melepas gaya yang ditempelkan pada elemen tanpa perlu tahu apakah property itu mewarisi; hasilnya tetap mengikuti perilaku alaminya.
• revert — menyerahkan kembali keputusan ke browser atau preferensi pengguna, misalnya setelah menimpa style library pihak ketiga.
• initial — dipakai lebih jarang dan perlu dipastikan artinya; berguna saat kita benar-benar menginginkan nilai awal spesifikasi, misalnya text-transform: initial untuk memastikan huruf kembali tanpa transformasi apa pun.

Contoh pemakaiannya dalam satu rule yang nyata:

.tombol-portal {
  font-family: inherit;    /* ikuti tipografi halaman, bukan font bawaan tombol */
  text-transform: initial; /* huruf kembali tanpa transformasi apa pun */
}

Pada demo berikut, rule button mewakili gaya halaman yang menekan, dan kata kunci pada .tombol-portal mengalahkannya:

Sementara itu, revert bekerja pada arah sebaliknya — melepas gaya halaman dan menyerahkan kembali ke sumber sebelumnya:

.pill-status {
  border-radius: revert;   /* kembali ke bentuk bawaan user-agent */
}

Untuk unset, dua paragraf berikut menerima deklarasi langsung berupa warna abu-abu dan garis atas, lalu paragraf kedua melepas keduanya dengan unset:

Satu kata kunci yang sama menghasilkan dua arah berbeda karena sifat alami kedua property memang berbeda.

Ringkasan #

Empat kata kunci global mengambil nilai dari sumber yang berbeda: initial dari spesifikasi, inherit dari elemen induk, unset dari perilaku alami property, dan revert dari sumber sebelum gaya penulis halaman. Ingat selalu bahwa display: initial bernilai inline, karena nilai initial bukanlah default browser. Dengan kotak alat ini kita bisa mengarahkan nilai secara eksplisit — bekal yang tepat sebelum memasuki deklarasi paling kuat di stylesheet: !important.