Properti CSS: Tampilan vs. Visibilitas

98

Apa perbedaan antara properti Tampilan vs. Visibilitas?

css

— Sachin R
sumber

7

kemungkinan duplikat Apa perbedaan antara visibilitas: tersembunyi dan tampilan: tidak ada

— kennytm

1

@KennyTM: dengan asumsi OP meminta secara khusus untuk membandingkan nilai masing-masing properti tersebut.

— BoltClock

111

The visibilityproperti hanya memberitahu browser apakah akan menampilkan elemen atau tidak. Bisa terlihat ( visible- Anda bisa melihatnya), atau tidak terlihat ( hidden- Anda tidak bisa melihatnya).

The displayproperti memberitahu browser bagaimana untuk menarik dan menunjukkan unsur, jika sama sekali - apakah itu harus ditampilkan sebagai inlineelemen (yaitu mengalir dengan teks dan elemen inline lain) atau blockelemen-tingkat (yaitu memiliki tinggi dan lebar sifat yang Anda dapat mengatur, itu apung, dll), atau inline-block(yaitu bertindak seperti kotak blok tapi diletakkan inline bukan) dan beberapa orang lain ( list-item, table, table-row, table-cell, flex, dll).

Saat Anda menyetel elemen ke display: blocktetapi juga menyetel visibility: hidden, browser masih memperlakukannya sebagai elemen blok, kecuali Anda tidak melihatnya. Seperti bagaimana Anda menumpuk kotak merah di atas kotak yang tidak terlihat: kotak merah tampak seperti mengambang di udara padahal sebenarnya kotak itu berada di atas kotak fisik yang tidak dapat Anda lihat.

Dengan kata lain, ini berarti elemen dengan displayyang tidak noneakan tetap memengaruhi aliran elemen di halaman, terlepas dari apakah elemen itu terlihat atau tidak. Kotak yang mengelilingi elemen dengan display: noneakan berperilaku seolah-olah elemen itu tidak pernah ada (meskipun tetap di DOM).

— BoltClock
sumber

1

.. tidakkah tampilan ada hubungannya dengan DOM? misalnya ... jika sudah display: none;, maka elemen itu dihapus dari DOM? atau apakah saya benar-benar bingung?

— Hristo

3

@Hristo: Sebenarnya tidak. Anda tidak akan pernah bisa memengaruhi posisi atau keberadaan elemen di DOM dengan CSS saja.

— BoltClock

@ BoltClock ... ya, kamu benar. Saya menyadari bahwa Anda tidak akan pernah bisa mengeluarkan elemen dari DOM, tetapi hanya memengaruhi bagaimana elemen itu ditampilkan sehubungan dengan DOM. apakah itu terdengar lebih akurat?

— Hristo

Satu hal penting untuk diperhatikan bahwa dengan menggunakan metode hide () jQuery, yang secara internal mengatur tampilan ke tidak ada, Anda tidak bisa mendapatkan posisi elemen ini. Saat menggunakan visibilitas, Anda dapat melakukannya.

— p0rsche

21

visibilitas: tersembunyi;

elemen tidak akan dicat DAN tidak menerima peristiwa klik / sentuh, tetapi ruang yang dibutuhkan masih terisi
karena masih ada untuk tujuan tata letak, Anda dapat mengukurnya tanpa terlihat
mengubah konten akan tetap membutuhkan waktu untuk mengubah posisi / tata letak halaman
visibilitas diwariskan, jadi ini berarti Anda dapat membuat anak-anak terlihat dengan memberi mereka visibilitas: terlihat;

tampilan: tidak ada;

akan membuat elemen tidak berpartisipasi dalam aliran / tata letak
dapat (tergantung pada browser yang digunakan) mematikan film Flash dan iframe (yang akan dimulai ulang / dimuat ulang setelah ditampilkan lagi), meskipun Anda dapat mencegah hal ini terjadi dengan iframe
elemen tidak akan memakan tempat. untuk tujuan tata letak sepertinya tidak ada
akan membuat beberapa browser / perangkat (seperti iPad) secara langsung mengambil kembali memori yang digunakan oleh elemen itu, menyebabkan gangguan kecil jika Anda beralih antara tidak ada dan nilai lain selama animasi

catatan tambahan:

gambar dalam konten tersembunyi: di semua browser populer gambar masih dimuat, meskipun gambar tersebut berada dalam elemen apa pun dengan visibilitas: tersembunyi; atau display: none;
font dalam konten tersembunyi: browser webkit (Chrome / Safari) dapat menunda pemuatan font khusus yang hanya digunakan dalam elemen tersembunyi, termasuk melalui visibilitas atau tampilan. Hal ini dapat menyebabkan Anda mengukur elemen yang masih menggunakan font fallback hingga font kustom dimuat.

— Spellcoder
sumber

19

display: none menghilangkan elemen dari aliran html sedangkan visibility: hidden tidak.

— matpol
sumber

2

tampilan: tidak ada; akan menghapus gaya visual / ruang fisik elemen DOM dari DOM, sedangkan visibility: hidden; tidak akan menghapus elemen, tetapi hanya menyembunyikannya. Jadi div yang menempati 300px ruang vertikal di DOM Anda MASIH akan menempati 300px lebar vertikal ketika disetel ke visibility: hidden; tetapi jika disetel ke display: none; gaya visualnya dan ruang yang ditempati disembunyikan dan ruang tersebut kemudian "dibebaskan" karena tidak ada kata yang lebih baik.

[EDIT] - Beberapa waktu yang lalu saya menulis hal di atas, dan apakah saya tidak cukup berpengetahuan atau mengalami hari yang buruk, saya tidak tahu, tetapi kenyataannya adalah, elemen tersebut TIDAK PERNAH dihapus dari hierarki DOM. Semua 'gaya' tampilan level blok sepenuhnya 'tersembunyi' saat menggunakan display: none, sedangkan dengan visibility: hidden; elemen itu sendiri tersembunyi tetapi masih menempati ruang visual di DOM. Saya harap ini membereskan semuanya

— SimonDowdles
sumber

4

Tidak, tidakdisplay: none akan menghapus elemen dari DOM. Elemennya masih ada, hanya saja tidak ditampilkan .

— BoltClock