Chapter sebelumnya menutup pintu dengan display: none: elemen hilang dari render dan layout sekaligus. Namun sering kali kebutuhan kita lebih bernuansa — kotaknya harus tetap menempati ruang, atau elemennya perlu memudar dengan mulus. Untuk itu CSS menyediakan dua alat lagi: visibility: hidden dan opacity: 0. Ketiganya membuat elemen “tidak terlihat”, tetapi perilaku di baliknya berbeda penting, dan perbedaan itu menentukan pilihan yang tepat.
Tiga Cara Menyembunyikan #
.cara-a { display: none; } /* hilang dari render dan layout */
.cara-b { visibility: hidden; } /* tak terlihat, ruang tetap ada */
.cara-c { opacity: 0; } /* transparan penuh, semua lainnya tetap jalan */Tiga kartu identik diberi perlakuan berbeda, ditambah satu tombol transparan yang bisa diklik:
visibility: hidden #
Elemen dengan visibility: hidden tetap dihitung dalam layout: kotaknya memakan ruang, tetapi tidak ada yang digambar, dan interaksi (klik, fokus) tidak sampai kepadanya. Screen reader juga melewatinya. Satu sifat unik membuat nilai ini spesial: visibility diwariskan, dan anak bisa menimpanya kembali menjadi terlihat.
.baris-pesanan {
visibility: hidden;
}
.baris-pesanan .sel-aksi {
visibility: visible; /* anak muncul kembali di dalam induk tersembunyi */
}Demo memakai pola itu pada satu baris tabel:
Baris tengah tetap menempati tingginya meskipun isinya tak terlihat — pola ini lazim untuk menampilkan tombol aksi hanya pada baris tertentu.
opacity: 0 #
opacity: 0 membuat elemen sepenuhnya transparan. Kotaknya tetap di layout, proses render tetap berjalan, dan — inilah nuansa pentingnya — elemen masih berinteraksi: tetap menerima klik, hover, dan fokus keyboard. Tombol yang diberi opacity: 0 tetap bisa diklik meskipun pengguna tidak melihatnya; inilah bug klasik berupa area kosong yang “mencuri” klik. Dari sisi aksesibilitas, elemen opacity: 0 masih bisa difokus keyboard tetapi tidak terbaca screen reader — kombinasi yang biasanya justru tidak kita inginkan. Kabar baiknya, karena elemen tetap dirender, opacity adalah property tersembunyi yang paling ramah animasi: transisi dari 0 ke 1 berjalan mulus per frame. Pengantar property ini ada di chapter Opacity pada section Warna, Background, dan Borders.
Tabel Perbandingan #
| Aspek | display: none | visibility: hidden | opacity: 0 |
|---|---|---|---|
| Ruang di layout | Tidak ada | Tetap ada | Tetap ada |
| Dirender | Tidak | Tidak | Ya (transparan penuh) |
| Bisa diklik | Tidak | Tidak | Ya |
| Bisa menerima fokus keyboard | Tidak | Tidak | Ya |
| Terbaca screen reader | Tidak | Tidak | Tidak |
| Anak bisa muncul kembali | Tidak | Ya (visibility: visible) | Tidak |
| Ramah transisi | Tidak (lihat catatan) | Sebagian (berubah diskrit) | Ya, paling mulus |
Baris terakhir layak digarisbawahi: display tidak bisa dianimasikan secara tradisional, sehingga pola “memudar lalu menghilang dari layout” memadukan opacity dan visibility — keduanya dianimasikan bersamaan. Sejak beberapa tahun terakhir ada juga pengembangan modern berupa @starting-style dan transition-behavior: allow-discrete yang membuat perubahan display bisa ikut dianimasikan; kita sentuh di section Transitions dan Animations.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
| Tombol tak terlihat masih menangkap klik | opacity: 0 tidak menghapus interaksi | Matikan pula interaksinya (display: none, visibility: hidden, atau pointer-events: none) |
| Transisi tidak berjalan saat menyembunyikan | display: none tidak bisa dianimasikan secara tradisional | Animasikan opacity plus visibility |
Anak tetap tak terlihat di dalam induk opacity: 0 | Opacity berlaku untuk seluruh subtree dan tidak bisa ditimpa anak | Naikkan opacity induk, atau pindahkan struktur |
Ringkasan #
Menyembunyikan elemen punya tiga tingkat: display: none menghapus kotak dari layout, visibility: hidden mempertahankan ruang sambil memutus semua interaksi, dan opacity: 0 mempertahankan ruang sekaligus interaksi. Untuk animasi, opacity dan visibility adalah pasangan yang bisa dianimasikan, sedangkan display memerlukan fitur modern terbaru. Berikutnya kita beralih dari menyembunyikan ke menggulir: apa yang terjadi ketika konten melebihi kotaknya dan bagaimana mengendalikan perilaku scrolling.