Perbedaan Display None Dan Visibility Hidden
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
Kali ini kita akan belajar cara menyembunyikan objek dengan css. sebenarnya ada beberapa alternatif kode yang bisa digunakan, diantaranya display:none dan visibility:hidden. Bahkan ada juga alternatif lainnya, yaitu membuat objek transparan dengan menambahkan kode opacity:0.
Sebelum melangkah pada perbedaan, sebaiknya kita ketahui dulu properti dari keduanya.
Display none dan visibility hidden
Display mempunyai 2 property yaitu :
- none (tidak kelihatan)
- block (kelihatan)
Begitupun visibility mempunyai 2 property yaitu :
- hidden (tidak kelihatan)
- visible (kelihatan)
Inti perintah display:none dan visibility:hidden sebetulnya sama saja yaitu menghilangkan objek dari halaman HTML. Perbedaannya sebenarnya tidak teralu mencolok, hanya pada masalah space saja.
Dengan menggunakan display:none maka space akan hilang, sedangkan dengan visibility:hidden space tetap ada. Sebagai contoh lihat tulisan CONTOH di bawah ini :
saya akan menyembunyikan CONTOH2 dengan display:none maka space akan hilang seperti contoh di bawah ini :
apabila menyembunyikan dengan visibility:hidden maka space akan tetap ada seperti contoh dibawah ini:
Sekian tutorial dari saya, semoga bermanfaat dan selamat mencoba…!
