CSS - Untuk menyembunyikan objek dengan CSS, ada beberapa alternatif kode yang 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)
- 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 sembunyikan CONTOH2 dengan display:none
maka space hilang seperti di bawah ini :
apabila disembunyikan dengan visibility:hidden
maka space tetap ada :
Baca juga :
- Perbedaan property dari overflow : hidden, display, scroll dan auto
- Perbedaan target:new dan target:_blank
Apakah display:none
akan terbaca oleh google?
Ya, google memiliki sistem tertentu walaupun objek disembunyikan dengan display:none
atau visibility:hidden
objek akan tetap terbaca. display:none
atau visibility:hidden
hanya memanipuasi browser saja.
Apakah display:none
bagus untuk SEO?
Penggunaan display:none
atau visibility:hidden
masih menjadi perdebatan, tapi menurut kebanyakan sumber, hal ini tidak akan mengganggu atau bermasalah dalam SEO. Akan tetapi khusus untuk text dianjurkan untuk tidak menggunakan display:none
atau visibility:hidden
sebagaimana dikatakan Matt Cutts di webnya.