Display None

Menyembunyikan elemen adalah pekerjaan rutin: panel tab yang belum aktif, menu yang diciutkan, item keranjang yang kosong, atau blok yang hanya relevan di ukuran layar tertentu. Nilai display: none adalah cara paling tegas untuk itu — elemen tidak hanya tidak digambar, tetapi juga dikeluarkan dari layout sepenuhnya. Chapter ini membahas apa yang sebenarnya terjadi, dampaknya bagi pengguna screen reader, kegunaan yang lazim, dan batas-batasnya.

Menghapus Elemen dari Render dan Layout #

Elemen dengan display: none tidak menghasilkan kotak sama sekali. Tiga konsekuensinya berurutan:

Tidak memakan ruang: elemen lain merapat seolah elemen itu tidak pernah ada di markup.
Tidak dirender: tidak ada latar, border, teks, maupun shadow yang digambar.
Anak-anaknya ikut tertutup: seluruh subtree tidak di-render, dan anak tidak bisa “menghidupkan” dirinya sendiri.

css
.tersembunyi {
  display: none;
}

html
<p>Item satu</p>
<p class="tersembunyi">Item dua — tidak dirender sama sekali</p>
<p>Item tiga</p>

Dua deret memakai markup identik; pada deret kedua, kartu tengah menerima class display: none:

Aksesibilitas: Tak Terlihat Berarti Tak Terbaca #

display: none menghilangkan elemen dari pohon aksesibilitas juga. Screen reader melewatinya, dan elemen itu tidak bisa menerima fokus keyboard. Sifat ini benar untuk konten yang memang tidak relevan saat itu — panel tab nonaktif tidak perlu dibacakan. Sifat ini salah untuk konten yang sebenarnya dibutuhkan pengguna: menyembunyikan label form atau informasi penting demi tampilan lebih rapat akan membuat pengguna screen reader kehilangan akses. Pola “sembunyikan secara visual tapi tetap terbaca” memakai teknik lain yang dibahas pada section Accessibility dan Debugging.

Kegunaan yang Lazim #

Tiga pola pemakaian yang akan (atau sudah) kita temui:

Toggle lewat JavaScript: class dengan display: none ditambahkan atau dihapus untuk membuka-menutup panel.
Menyembunyikan responsif: elemen pelengkap disembunyikan di layar kecil lewat media query — pola lengkapnya dibahas di section Responsive Web Design.
Panel tab: hanya panel aktif yang menerima display: block; sisanya display: none.

css
@media (max-width: 640px) {
  .aside-promo {
    display: none; /* sederhana; pola responsif lengkap dibahas nanti */
  }
}

Demo berikut menampilkan kedua keadaan aturan itu berdampingan:

Sekilas: visibility: hidden #

Ada situasi ketika ruang harus tetap ada meskipun isinya tak terlihat — misalnya agar kartu di grid tidak berubah posisi. Nilai visibility: hidden menyembunyikan gambar elemen tetapi mempertahankan kotaknya di layout, dan ada pula pilihan ketiga bernuansa lain: opacity: 0. Perbandingan lengkap ketiganya adalah topik chapter berikutnya.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Elemen ber-atribut `hidden` tetap tampil	Aturan `display` milik penulis menimpa aturan bawaan `hidden`	Tambahkan aturan `[hidden] { display: none !important; }`, atau kelola lewat class
Anak dari elemen `display: none` tidak mau muncul	Anak tidak bisa menghidupkan diri; induklah yang menahan seluruh subtree	Ubah `display` pada induk, bukan pada anak
Konten penting hilang dari screen reader	`display: none` juga menyembunyikan dari pohon aksesibilitas	Simpan konten di tempat yang terjangkau atau pakai teknik visually hidden

Ringkasan #

display: none menghapus elemen dari rendering dan layout sekaligus: tanpa kotak, tanpa ruang, tanpa jejak bagi screen reader dan keyboard. Nilai ini tepat untuk konten yang memang tidak relevan saat itu, dan atribut hidden adalah pasangan semantiknya. Namun menghapus dari layout bukan satu-satunya cara menyembunyikan — visibility: hidden mempertahankan ruang, dan opacity: 0 menyimpan jebakan interaksinya sendiri. Ketiganya kita bandingkan berdampingan pada chapter berikutnya.