Revert dan Revert-layer

Kata kunci initial dan unset mengembalikan properti ke titik nol spesifikasi. Sering kali itu bukan yang kita mau: kita ingin sebuah elemen kembali ke gaya yang berlaku sebelum aturan tertentu — misalnya gaya bawaan browser, atau nilai dari lapisan stylesheet sebelumnya. Untuk kebutuhan itu CSS menyediakan revert dan revert-layer. Keduanya merupakan Baseline sejak 2022 (tersedia di Chrome 99, Firefox 97, dan Safari 15.4) sehingga aman dipakai di seluruh browser utama. Pada Chapter ini kita memahami arah “mundur” keduanya, lalu mengujinya dalam satu demo.

Revert: Kembali ke Origin Sebelumnya #

Deklarasi revert menghapus kontribusi origin author untuk properti tersebut, lalu mengambil nilai seolah-olah deklarasi author itu tidak pernah ada. Pada praktiknya, browser menghitung ulang cascade dengan hanya memperhitungkan origin di bawah author: user-agent dan user. Bila user-agent tidak menetapkan nilai untuk properti itu, elemen kembali mengikuti perilaku alaminya — mewarisi dari induk atau mengambil nilai awal.

css
b.tipis { font-weight: 400; }     /* author menimpa gaya bawaan */
b.balik { font-weight: revert; }  /* kembali ke user-agent: bold (700) */

Perhatikan bedanya dengan initial: font-weight: initial menghasilkan normal untuk semua elemen, sedangkan font-weight: revert pada <b> menghasilkan 700 karena yang dikembalikan adalah gaya user-agent elemen tersebut, bukan nilai awal spesifikasi.

Perbandingan dengan unset melengkapi gambarannya:

Situasi	`unset`	`revert`
`font-weight` pada `<b>` tebal bawaan	Nilai warisan induk	`700`, gaya user-agent
`color` pada `<h1>` tanpa aturan author	Warisan induk	Sama — origin bawah pun tidak menetapkan warna
`border` pada `<div>` polos	`none`, nilai awal	Sama, karena user-agent tidak menggambar border

Dari tabel tersebut terlihat kapan keduanya berbeda: unset mengabaikan gaya bawaan browser yang bersifat per-elemen, sedangkan revert memulihkannya. Untuk elemen yang punya gaya user-agent khas — <b>, <em>, <button>, <h1> — perbedaan ini langsung terlihat di layar.

Kata kunci revert dapat pula ditulis pada atribut style inline; hasilnya konsisten — kontribusi author untuk properti itu dilepas sebelum nilai dihitung. Sifat ini membuat revert aman ditaruh di mana pun deklarasi author biasa ditaruh.

Revert-layer: Kembali ke Layer Sebelumnya #

Deklarasi revert-layer bekerja pada skala yang lebih halus: mengembalikan properti ke nilai dari cascade layer sebelumnya, bukan ke origin sebelumnya. Ketika tidak ada layer sebelumnya yang memberi nilai, revert-layer berperilaku seperti revert — kembali ke origin di bawah author.

css
@layer dasar, aksen;

@layer dasar {
  .lapis { color: rgb(13, 148, 136); }
}

@layer aksen {
  .lapis        { color: rgb(234, 88, 12); }
  .lapis-balik  { color: revert-layer; } /* kembali ke nilai layer dasar */
}

Pada elemen dengan kedua class di atas, aturan .lapis-balik menang di dalam layer aksen (ditulis belakangan), lalu revert-layer menarik nilai itu kembali ke layer dasar: tampil teal, bukan oranye.

Demo dan Pembacaan Hasil #

Demo chapter ini menggabungkan kedua kata kunci dalam satu halaman statis tanpa skrip, sehingga seluruh nilai bisa kita baca langsung dari tampilan maupun DevTools. Bagian penting stylesheet-nya:

css
body { color: rgb(51, 65, 85); }

h1.merah  { color: rgb(220, 38, 38); }
h1.kembali { color: rgb(220, 38, 38); color: revert; }

b.tipis { font-weight: 400; }
b.balik { font-weight: revert; }

@layer dasar, aksen;
@layer dasar {
  .lapis { color: rgb(13, 148, 136); }
}
@layer aksen {
  .lapis       { color: rgb(234, 88, 12); }
  .lapis-balik { color: revert-layer; }
  .lapis-habis { color: revert-layer; }
}

Hasil di Browser:

text
Judul pertama tampil merah (rgb(220, 38, 38)) dari deklarasi author.
Judul kedua dengan color: revert kembali ke origin sebelumnya: user-agent
tidak menetapkan warna h1, sehingga judul mewarisi abu-abu rgb(51, 65, 85)
dari body.
Teks "tebal 400" tampil dengan font-weight 400, sedangkan "tebal revert"
kembali tebal (font-weight 700) sesuai gaya user-agent untuk elemen b.
Paragraf layer aksen tampil oranye (rgb(234, 88, 12)) — layer yang
dideklarasikan belakangan menang di antara deklarasi normal.
Paragraf revert-layer tampil teal (rgb(13, 148, 136)) — nilai dari layer
dasar.
Paragraf revert-layer tanpa nilai di layer sebelumnya kembali ke origin
user-agent: warna diwariskan dari body (rgb(51, 65, 85)).

Mari kita telaah poin-poin pentingnya:

h1.kembali: dua deklarasi color dalam satu blok; yang belakangan (revert) menang menurut source order, lalu nilai author untuk warna judul diabaikan seluruhnya.
b.balik: <b> tebal secara bawaan oleh user-agent. revert memulihkan tebal 700, berbeda dengan unset yang akan menghasilkan nilai warisan induk.
.lapis: oranye menang karena urutan layer — mekanisme lengkapnya kita bedah pada Chapter Cascade Layers .
.lapis-balik: revert-layer mengembalikan nilai ke layer dasar, menghasilkan teal.
.lapis-habis: tidak ada layer sebelumnya yang memberi nilai, sehingga revert-layer jatuh ke origin user-agent; warna judul pun mengikuti warisan body.

Demo lengkap membawa data-expected pada ketujuh elemen uji di atas, sehingga perilaku kedua kata kunci diverifikasi otomatis oleh harness Course. Fondasi @layer yang dipakai di sini kita perdalam pada chapter berikutnya.