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

14 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat