The visibilityproperti di CSS memiliki dua fungsi yang berbeda. Ini menyembunyikan baris dan kolom tabel, dan juga menyembunyikan elemen tanpa mengubah tata letak.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitymemiliki empat nilai yang valid: visible, hidden, collapse, dan inherit. Kami akan membahas masing-masing untuk mempelajari lebih lanjut.
terlihat
Seperti kedengarannya, visiblemembuat semuanya terlihat. Tidak ada yang disembunyikan secara default, jadi nilai ini tidak melakukan apa pun kecuali Anda telah menyetel hiddenini atau induk dari elemen ini.
tersembunyi
The hidden nilai menyembunyikan sesuatu. Ini berbeda dengan menggunakan display: none, karena hidden hanya menyembunyikan elemen secara visual. Elemen tersebut masih ada, dan masih menempati ruang di halaman, tetapi Anda tidak dapat melihatnya lagi (seperti mengubah opacity menjadi 0). Menariknya, properti ini tidak mewarisi secara default. Artinya, tidak seperti display atau opacity properti, Anda dapat membuat elemen hidden, dan masih memiliki salah satu turunannya sebagai visible, seperti ini:
Perhatikan bahwa, meski tersembunyi, elemen induk tidak memicu :hover.
jatuh
Yang satu ini hanya mempengaruhi baris tabel ( ), grup baris (seperti ), kolom ( ), grup kolom ( ), atau elemen yang dibuat sedemikian rupa display).
Tidak seperti hidden, nilai ini menyembunyikan sub-elemen tabel, tanpa meninggalkan spasi di tempatnya. Jika digunakan di mana saja kecuali pada sub-elemen tabel, fungsinya seperti visibility: hidden.
Ada begitu banyak keanehan dalam hal ini sehingga sulit untuk mengetahui dari mana harus memulai. Sama seperti hidangan pembuka:
- Chrome / Safari akan menciutkan satu baris, tetapi ruang yang ditempati akan tetap ada. Dan jika sel tabel di dalamnya memiliki batas, itu akan menciut menjadi satu batas di sepanjang tepi atas.
- Chrome / Safari tidak akan menciutkan kolom atau grup kolom.
- Safari menciutkan sel tabel (salah) tetapi Chrome tidak (benar).
- Di browser apa pun, jika sel berada di kolom yang diciutkan (apakah benar-benar menciut atau tidak), teks di dalam sel itu tidak akan ditampilkan.
- Opera (pra WebKit) akan menutup semua omong kosong, kecuali sel tabel (yang benar).
Ada lebih banyak, tetapi pada dasarnya: jangan pernah menggunakan ini.
mewarisi
Nilai default. Ini hanya menyebabkan elemen mewarisi nilai induknya.
Flexbox
visibility: collapse; digunakan di Flexbox juga, dan lebih jelas.
Dukungan Browser
Dasar-dasar, tidak mempertimbangkan semua kebiasaan dengan keruntuhan:
| Apa saja | Apa saja | Apa saja | 4+ | 4+ | Apa saja | Apa saja |
IE 7- tidak mendukung collapseatau inherit.