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


1173

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

Jawaban:


1475

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

14
Tidak ada komentar tentang kinerja satu sama lain? Saya ingin tahu metode mana yang digunakan untuk menyembunyikan elemen yang benar-benar diposisikan, yang sering ditampilkan dan disembunyikan.
Tomáš Zato - Reinstate Monica

2
Ini adalah tebakan total yang belum saya lakukan tes, tapi saya kira mereka hampir sama. Segera setelah sesuatu berubah pada layar, seluruh layar akan merender ulang (setidaknya seperti dulu), dan itu tidak terlalu penting. Anda masih memaksakan pengecatan ulang layar. Ini bisa sangat browser dengan browser, dan sebenarnya mungkin ada cara yang lebih baik untuk mengoptimalkan kode daripada berfokus pada ini.
kemiller2002

13
@Kevin benar dalam hal itu visibility: hiddendan display: noneakan memiliki kinerja yang sama karena keduanya retrigger layout, cat, dan komposit. Namun, opacity: 0secara fungsional setara dengan visibility: hiddendan tidak retrigger langkah tata letak, jadi saya akan menyarankan menggunakan itu jika Anda tidak keberatan ruang kosong masih dialokasikan (jika tidak gunakan display: none).
jayrobin

76
Sangat penting untuk mengingat transisi css ketika berbicara tentang visibilitas vs tampilan. Misalnya, beralih dari visibilitas: tersembunyi; untuk visibilitas: terlihat; memungkinkan untuk transisi css untuk digunakan, sedangkan beralih dari tampilan: tidak ada; untuk menampilkan: blok; tidak. visibilitas: tersembunyi memiliki manfaat tambahan karena tidak menangkap peristiwa javascript, sedangkan opacity: 0; menangkap acara.
Michael Deal

9
opacity: 0harus digunakan dengan hati-hati ketika berhadapan dengan input atau tombol, karena mereka akan tetap ada dan mungkin menyebabkan interaksi pengguna yang aneh.
jacques mouette

233

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.


3
Ada perbedaan besar lainnya di antaranya: setidaknya di Chrome, visibilitas dapat digunakan dengan penundaan transisi tetapi tampilan mengabaikannya.
SapphireSun

1
Cara yang lucu untuk menjelaskan, tetapi menarik. :)
Elango Paul Victor

107

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?


@greenoldman Bisakah Anda memberikan contoh? Ini adalah jsfiddle di mana elemen tersembunyi (saya mencoba div dan span) yang merupakan satu-satunya elemen dalam wadahnya, dan itu masih memakan ruang: jsfiddle.net/rmb5wdLd/1
Kip

@ Tip, aneh - Saya tidak bisa melakukan ini sekarang (dan saya mengubah proyek saya sendiri juga). OK, saya lebih baik menghapus komentar saya sebelumnya dan ketika saya memiliki testcase solid saya akan menunjukkannya, maaf untuk kebisingan
greenoldman

90

display:none menghapus elemen dari aliran tata letak.

visibility:hidden menyembunyikannya tetapi meninggalkan ruang.


70

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.


Poin bagus, ini bisa dengan mudah dilewatkan. display: tidak ada / blok tidak akan memicu transisi, jadi menggunakan visibilitas: tersembunyi dapat bekerja, tetapi elemen anak juga perlu vilibilitas: disembunyikan pada saat yang sama
Drenai

18

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.


15

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.


Menggunakan $ ('# element'). Remove () sepenuhnya menghilangkan elemen dari halaman (DOM). Tidak menampilkannya atau tidak menggunakan ruang tidak berarti menghapusnya. Anda masih dapat mengubah statusnya dengan $ ('# elemen') sederhana. Show (), sehingga tidak "sepenuhnya dihapus".
foxontherock

11

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.


Dengan tersembunyi, adalah ruang yang dipertahankan dimensi vertikal saja. Bagaimana dengan horizontal?
Chris Noe

2
Dimensi horizontal juga dipertahankan.
JB Hurteaux

9

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.


7

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.



6
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


Saya akan menyarankan agar tidak menautkan ke w3schools karena ketidaktepatan yang diketahui di situs web.
Skere

5

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


5

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.



2

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.

1

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


0

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:

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.