LEARN CSS : Perbedaan penggunaan display none dan visibility hidden
Terkadang ada beberapa hal elemen yang ingin kita sembunyikan atau ada tapi tidak terlihat oleh pengguna pada suatu tampilan website. Seringkali juga kita memerlukan hide/show suatu elemen untuk suatu interaksi-interaksi tertentu karena tidak memungkinkan untuk menampilkan semua informasi secara bersamaan dalam suatu tampilan.
Oleh sebab itu kita memerlukan properti dalam CSS yang dapat digunakan untuk menyembunyikan suatu elemen HTML dari tampilan. Ada dua properti CSS yang dapat diterapkan, yaitu display: none; atau visibility: hidden;
Dimana perbedaan keduanya ? Mari kita bahas bersama.
Display: none;
Seperti yang telah saya bahas sebelumnya pada artikel LEARN CSS : Display Property (1)
“ Elemen yang memiliki display: none; tidak akan ditampilkan dalam tampilan halaman browser. Posisi atau tempat elemen tersebut berada seharusnya akan digantikan oleh elemen selanjutnya. Sehingga, alur atau tata letak tampilan tidak akan berakibat pada elemen-elemen lainnya.”
Visibility: hidden;
Sebelumnya mari kita bahas apa itu property visibility. Visibility digunakan untuk mengatur ada atau tidaknya suatu elemen pada tampilan. Secara default nilai visibility suatu elemen adalah visible.
Suatu elemen yang memiliki nilai visibility hidden. Maka elemen tersebut akan hilang/disembunyikan dalam tampilan suatu website. Akan tetapi elemen tersebut tetap mengambil space(tempat) dari elemen tersebut. Jadi elemen tidak benar-benar hilang dari tampilan hanya tidak ditampilkan.
Jadi jika kita ibaratkan nilai hidden pada visibility properti ini adalah suatu rumah yang kosong. Rumahnya akan tetap ada tetapi tidak ada isinya karena sudah dikosongkan. Sedangkan untuk nilai none pada display diibaratkan dengan rumah yang digusur. Jadi sudah tidak ada lagi rumahnya dan tanah tempat berdirinya rumah tersebut dapat diisi oleh rumah lain.
Berikut contoh penggunaannya :
