Perbedaan Antara Display None dan Visibility Hidden

M-S Blog || Perbedaan Antara Display None dan Visibility Hidden- Untuk menyembunyikan objek dengan CSS, ada beberapa alternatif kode yang digunakan, 
diantaranya display:none danvisibility: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 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:hiddenspace tetap ada. Sebagai contoh lihat tulisan CONTOH di bawah ini

CONTOH1CONTOH2CONTOH3

saya sembunyikan CONTOH2 dengan display:none maka space hilang seperti di bawah ini :

CONTOH1CONTOH3

apabila disembunyikan dengan visibility:hidden maka space tetap ada :

CONTOH1CONTOH3

APAKAH DISPLAY:NONE AKAN TERBACA OLEH GOOGLE?

Ya, google memiliki sistem tertentu walaupun objek disembunyikan dengan display:none atauvisibility:hodden objek akan tetap terbaca. display:none atau visibility:hodden hanya memanipuasi browser saja.

APAKAH DISPLAY:NONE BAGUS UNTUK SEO?

Penggunaan display:none atau visibility:hodden 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:hodden sebagaimana dikatakan Matt Cutts di webnya.

Semoga bermanfaat...