Memahami Penggunaan Revert pada CSS

Memahami Penggunaan Revert pada CSS – Hallo semuanya, tahukah kalian tentang css revert? Ya, properti ini memang sangat jarang digunakan juka kalian belum pernah mengetahuinya, tetapi melihat dari apa yang bisa dilakukan ketika kita menggunakan properti revert pada css ini membuat saya berpikiran bahwa cukup menarik jika kita bahas properti revert ini.

Apa itu properti revert pada css? Properti revert pada css adalah properti yang mengembalikan value ke nilai yang diwarisi oleh elemen parent. Ini penting, karena ketika kita punya tag <p> maka kita tidak bisa membuat reset untuk menjadikannya inline, karena secara default tag <p> memiliki sifat block.

Contohnya seperti ini, jika kita memiliki HTML seperti berikut

<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>

Dan CSS seperti berikut

p {
  color: red;
}
.alt {
  color: revert;
}

Kedua tag <p> diatas secara umum akan berwarna merah. Tetapi tidak untuk kali ini, pada class .alt kita menggunakan revert dimana nantinya akan membuat text tersebut berwarna hitam. Kenapa? Karena warna default sebelum kita menggunakan color:red adalah hitam.

Contoh 2

HTML:

<div class="parent">
  <p>Lorem, ipsum dolor.</p>
  <p class="alt">Fugit, id vel.</p>
</div>

CSS:

.parent {
  color: blue;
}
p {
  color: red;
}
.alt {
  color: revert;
}

Pada contoh 2 kali ini class .alt yang kita buat akan berwarna biru, karena disini warna warisan yang didapatkan adalah biru dari class .parent.

Value revert adalah hal yang baru, saat ini hanya support pada browser firefox dan safari, sementara untuk kelompok google chrome masih belum mendukung css revert.

Secara tidak langsung css revert memang cukup bagus, karena membuat kita bisa mengatur style yang harus bersifat inheritance atau tidak. Tetapi revert css juga memungkinkan melakukan reset terhadap keseluruhan style secara tidak sengaja.

Baiklah, demikian artikel kali ini yang membahas tentang penggunaan revert sebagai properti css yang cukup baru, sampai jumpa di video selanjutnya. semoga bermanfaat, terima kasih