Apa perbedaan antara visibilitas: tersembunyi dan tampilan: tidak ada?

Aturan CSS visibility:hiddendan display:nonekeduanya menghasilkan elemen tidak terlihat. Apakah ini sinonim?

display:noneberarti bahwa tag yang dipermasalahkan tidak akan muncul pada halaman sama sekali (meskipun Anda masih dapat berinteraksi dengannya melalui dom). Tidak akan ada ruang yang dialokasikan untuk itu di antara tag lain.

visibility:hiddenberarti tidak seperti itu display:none, tag tidak terlihat, tetapi ruang dialokasikan untuk itu pada halaman. Tag diberikan, itu tidak terlihat di halaman.

Sebagai contoh:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Mengganti [style-tag-value]dengan display:nonehasil di:

test |   | test

Mengganti [style-tag-value]dengan visibility:hiddenhasil di:

test |                        | test

Mereka bukan sinonim.

display:none menghapus elemen dari aliran normal halaman, memungkinkan elemen lain untuk mengisi.

visibility:hidden meninggalkan elemen dalam aliran normal halaman sehingga masih menempati ruang.

Bayangkan Anda berada dalam antrean untuk naik di taman hiburan dan seseorang di antrean menjadi begitu gaduh sehingga keamanan menarik mereka dari antrean. Semua orang yang ada di barisan kemudian akan bergerak maju satu posisi untuk mengisi slot yang sekarang kosong. Ini seperti display:none.

Bandingkan ini dengan situasi yang sama, tetapi seseorang di depan Anda mengenakan jubah tembus pandang. Saat melihat garis, itu akan terlihat seperti ada ruang kosong, tetapi orang tidak bisa benar-benar mengisi ruang kosong itu karena seseorang masih ada di sana. Ini seperti visibility:hidden.

Satu hal yang patut ditambahkan, meskipun tidak ditanyakan, adalah bahwa ada opsi ketiga untuk membuat objek sepenuhnya transparan. Mempertimbangkan:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Pastikan untuk mengklik tombol "Jalankan cuplikan kode" di atas untuk melihat hasilnya.)

Perbedaan antara 1 dan 2 telah ditunjukkan (yaitu, 2 masih membutuhkan ruang). Namun, ada perbedaan antara 2 dan 3: dalam kasus 3, mouse masih akan beralih ke tangan ketika melayang di atas tautan, dan pengguna masih dapat mengklik tautan, dan acara Javascript masih akan menyala di tautan. Ini biasanya bukan perilaku yang Anda inginkan (tapi mungkin kadang-kadang itu?).

Perbedaan lainnya adalah jika Anda memilih teks, lalu menyalin / menempelkan sebagai teks biasa, Anda mendapatkan yang berikut:

1st link.
2nd  link.
3rd unseen link.

Dalam kasus 3 teks disalin. Mungkin ini akan berguna untuk beberapa jenis watermarking, atau jika Anda ingin menyembunyikan pemberitahuan hak cipta yang akan muncul jika pengguna yang sembrono menyalin / menempelkan konten Anda?

display:none menghapus elemen dari aliran tata letak.

visibility:hidden menyembunyikannya tetapi meninggalkan ruang.

Ada perbedaan besar dalam hal node anak. Sebagai contoh: Jika Anda memiliki div orang tua dan div anak bersarang. Jadi jika Anda menulis seperti ini:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Dalam hal ini tidak ada div yang akan terlihat. Tetapi jika Anda menulis seperti ini:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Maka div anak akan terlihat sedangkan div induk tidak akan ditampilkan.

Mereka bukan sinonim - display: nonemenghapus elemen dari aliran halaman, dan sisa halaman mengalir seolah-olah itu tidak ada.

visibility: hidden menyembunyikan elemen dari tampilan tetapi bukan aliran halaman, meninggalkan ruang untuk itu pada halaman.

display: none menghapus elemen dari halaman sepenuhnya, dan halaman dibangun seolah-olah elemen itu tidak ada sama sekali.

Visibility: hidden meninggalkan ruang dalam aliran dokumen meskipun Anda tidak lagi dapat melihatnya.

Ini mungkin atau mungkin tidak membuat perbedaan besar tergantung pada apa yang Anda lakukan.

Dengan visibility:hiddenobjek masih memakan ketinggian vertikal pada halaman. Dengan display:noneitu sepenuhnya dihapus. Jika Anda memiliki teks di bawah gambar dan Anda melakukannya display:none, teks itu akan bergeser ke atas untuk mengisi ruang tempat gambar itu berada. Jika Anda melihat: tersembunyi teks akan tetap berada di lokasi yang sama.

display:noneakan menyembunyikan elemen dan menutup ruang yang diambil, sedangkan visibility:hiddenakan menyembunyikan elemen dan melestarikan elemen ruang. tampilan: tidak ada juga efek beberapa properti yang tersedia dari javascript di versi IE dan Safari yang lebih lama.

Selain semua jawaban lain, ada perbedaan penting untuk IE8: Jika Anda menggunakan display:nonedan mencoba untuk mendapatkan lebar atau tinggi elemen, IE8 mengembalikan 0 (sementara browser lain akan mengembalikan ukuran sebenarnya). IE8 mengembalikan lebar atau tinggi yang benar hanya untuk visibility:hidden.

visibility:hiddenmenjaga ruang; display:nonetidak.

display: none; 

Ini tidak akan tersedia di halaman dan tidak menempati ruang apa pun.

visibility: hidden; 

ia menyembunyikan elemen, tetapi masih akan memakan ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tetapi tetap saja, mempengaruhi tata letak.

visibility: hiddenmelestarikan ruang, sedangkan display: nonetidak melestarikan ruang.

Contoh Tampilan Tidak Ada: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Contoh Tersembunyi Visibilitas: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Jika properti visibilitas diatur ke "hidden", browser masih akan mengambil ruang pada halaman untuk konten meskipun itu tidak terlihat.
Tetapi ketika kita mengatur objek "display:none", browser tidak mengalokasikan ruang pada halaman untuk kontennya.

Contoh:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Melihat rincian

visibility:hidden akan menyimpan elemen di halaman dan menempati ruang itu tetapi tidak menunjukkan kepada pengguna.

display:none tidak akan tersedia di halaman dan tidak menempati ruang apa pun.

Satu perbedaan lain adalah yang visibility:hiddenbekerja di browser yang benar-benar lama, dan display:nonetidak:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Perbedaannya melampaui gaya dan tercermin dalam bagaimana elemen berperilaku ketika dimanipulasi dengan JavaScript.

Efek dan efek samping dari display: none:

• elemen target dikeluarkan dari aliran dokumen (tidak memengaruhi tata letak elemen lain);
• semua keturunan terpengaruh (tidak ditampilkan juga dan tidak bisa "keluar" dari warisan ini);
• pengukuran tidak dapat dibuat untuk elemen target maupun untuk keturunannya - mereka tidak diberikan sama sekali, sehingga mereka clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), semua kembali 0s.

Efek dan efek samping dari visibility: hidden:

• elemen target disembunyikan dari pandangan, tetapi tidak dikeluarkan dari aliran dan memengaruhi tata letak, menempati ruang normalnya;
• innerText(tetapi tidak innerHTML) elemen target dan keturunan mengembalikan string kosong.

display:none;tidak akan menampilkan elemen juga tidak akan membagikan ruang untuk elemen pada halaman sedangkan visibility:hidden;tidak akan menampilkan elemen pada halaman tetapi akan membagikan ruang pada halaman. Kami dapat mengakses elemen dalam DOM dalam kedua kasus. Untuk memahaminya dengan cara yang lebih baik silakan lihat kode berikut: display: none vs visibility: hidden

Ada banyak jawaban terperinci di sini, tetapi saya pikir saya harus menambahkan ini untuk mengatasi aksesibilitas karena ada implikasinya.

display: none;dan visibility: hidden;mungkin tidak dibaca oleh semua perangkat lunak pembaca layar. Ingatlah apa yang akan dialami pengguna dengan gangguan visual.

Pertanyaannya juga menanyakan tentang sinonim. text-indent: -9999px;adalah satu sama lain yang kira-kira setara. Perbedaan penting dengan text-indentitu akan sering dibaca oleh pembaca layar. Ini bisa menjadi sedikit pengalaman buruk karena pengguna masih dapat menabrak tautan.

Untuk aksesibilitas, apa yang saya lihat digunakan hari ini adalah kombinasi gaya untuk menyembunyikan elemen sambil terlihat oleh pembaca layar.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Praktik yang bagus adalah membuat tautan "Lewati ke konten" ke jangkar badan utama konten. Pengguna tunanetra mungkin tidak ingin mendengarkan pohon navigasi lengkap Anda di setiap halaman. Jadikan tautan tersembunyi secara visual. Pengguna cukup menekan tab untuk mengakses tautan.

Untuk lebih lanjut tentang aksesibilitas dan konten tersembunyi, lihat:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/