Initial, Inherit, dan Unset

Setiap deklarasi yang kita tulis bersaing di dalam cascade, tetapi CSS juga menyediakan tiga kata kunci yang berdiri di luar kompetisi nilai biasa: initial, inherit, dan unset. Ketiganya dapat dipakai pada properti mana pun untuk menyatakan dengan gamblang nilai mana yang kita inginkan — nilai awal spesifikasi, nilai induk, atau nilai yang mengikuti sifat properti. Kata kunci ini berguna ketika komponen harus mengikuti konteks di sekelilingnya, atau justru harus dilepaskan dari gaya global. Pada Chapter ini kita memahami logika ketiganya, mengujinya pada elemen nyata, dan menutup dengan jebakan shorthand all: unset.

Tiga Kata Kunci dengan Satu Logika #

Ketiga kata kunci berlaku universal dan terdokumentasi pada MDN untuk initial , inherit , dan unset . Logikanya ringkas:

Kata kunci ini menjawab dua kebutuhan yang tidak bisa diselesaikan cascade biasa. Pertama, memaksa properti non-inherited mengikuti induk — misalnya border-style: inherit agar elemen meniru garis induknya. Kedua, melepaskan gaya yang menempel tanpa menebak-nebak nilai penggantinya: font-style: initial pada <em> langsung menghasilkan normal tanpa perlu kita hafal nilai awalnya.

Satu hal penting untuk ditegaskan: kata kunci ini adalah nilai biasa dalam kompetisi cascade. Deklarasi color: inherit masih dapat dikalahkan deklarasi color lain yang lebih spesifik atau ditulis belakangan, sama seperti nilai apa pun. Yang berbeda hanyalah sumber nilainya — induk atau spesifikasi — bukan kekuatannya di dalam cascade. Karena itu, kombinasi kata kunci dengan selector yang tepat (class komponen, misalnya) adalah cara memastikan perilakunya stabil.

Shorthand all menerima ketiga kata kunci itu sekaligus dan menerapkannya ke semua properti, kecuali direction, unicode-bidi, dan custom properties. Dengan kata lain, all: unset mereset seluruh properti elemen mengikuti sifat masing-masing.

Contoh Penerapan pada Elemen #

Demo chapter ini menaruh semua uji di dalam satu wadah .wadah yang menetapkan color biru dan font-weight: 600:

.wadah {
  color: rgb(2, 132, 199);
  font-weight: 600;
  font-size: 16px;
}

.paksa      { color: inherit; }
.awal       { font-style: initial; }
.garis      { border-style: initial; border-width: 4px; border-color: rgb(220, 38, 38); }
.berat-hapus{ font-weight: unset; }
.garis-hapus{ border-style: unset; border-width: 4px; border-color: rgb(220, 38, 38); }
.total      { all: unset; }

<div class="wadah">
  <p>Default: <span class="turun">mewarisi biru 600</span>.</p>
  <p>inherit: <span class="paksa">dipaksa mewarisi</span>.</p>
  <p>initial pada em: <em class="awal">tidak miring lagi</em>.</p>
  <p>initial pada border: <span class="garis">garisnya tidak muncul</span>.</p>
  <p>unset pada font-weight: <span class="berat-hapus">kembali mewarisi 600</span>.</p>
  <p>unset pada border: <span class="garis-hapus">garisnya tidak muncul</span>.</p>
  <p>all: unset: <span class="total">teks tanpa gaya penulis</span>.</p>
</div>

Hasil di Browser:

Span default dan span dengan color: inherit sama-sama tampil biru
(rgb(2, 132, 199)) dengan font-weight 600 dari .wadah.
em dengan font-style: initial tampil tegak (normal), bukan miring.
Span dengan border-width 4px merah tetapi border-style: initial tidak
menampilkan garis apa pun karena nilai awal border-style adalah none.
font-weight: unset mengikuti sifat propertinya — font-weight mewarisi,
sehingga kembali ke 600 milik .wadah.
border-style: unset jatuh ke initial (none) karena border tidak mewarisi.
Span dengan all: unset tampil seperti teks polos: color kembali rgb(2, 132, 199)
(unset pada properti yang mewarisi berarti inherit), border-style none, dan
display kembali inline.

Mari kita telaah mekanismenya baris demi baris:

1. .paksa { color: inherit; }: color memang mewarisi secara alami, sehingga hasilnya identik dengan span default. Deklarasi ini berguna justru pada properti non-inherited.
2. .awal { font-style: initial; }: elemen <em> menerima italic dari origin user-agent; kata kunci initial memindahkan nilainya ke nilai awal spesifikasi, yaitu normal.
3. .garis { border-style: initial; ... }: kita memberi border-width: 4px dan warna merah, tetapi border-style: none membuat garis tidak digambar — bukti bahwa nilai awal border-style adalah none.
4. .berat-hapus { font-weight: unset; }: font-weight adalah properti yang mewarisi, sehingga unset berperilaku seperti inherit dan span kembali menerima 600 dari induknya.
5. .garis-hapus { border-style: unset; }: border tidak mewarisi, sehingga unset berperilaku seperti initial dan menghasilkan none.
6. .total { all: unset; }: seluruh properti span direset sekaligus — latar, padding, border hilang, dan display kembali ke nilai awalnya.

Jebakan all: unset #

Bila tujuan kita bukan “kembali ke nilai awal spesifikasi” melainkan “kembali ke gaya yang berlaku sebelum aturan ini”, kata kunci yang tepat adalah revert — topik Chapter Revert dan Revert-layer . Demo pada chapter ini membawa data-expected untuk setiap span dan em, sehingga perilaku ketiga kata kunci diverifikasi otomatis oleh harness Course.