Visibility

Ada situasi ketika sebuah elemen harus tidak terlihat, tetapi layout halaman tidak boleh bergeser sedikit pun: pemutar musik yang sedang jeda, kartu yang menunggu data, atau langkah wizard yang slotnya harus tetap terjaga. Nilai visibility: hidden menyembunyikan gambar elemen tanpa melepas ruangnya di dalam alur — kebalikan dari display: none yang menghapus segalanya. Pada Chapter ini kita membedakan keduanya secara tuntas, ditambah satu pembanding yang sering terlupakan: opacity: 0.

hidden: Menyembunyikan dengan Menjaga Ruang #

Properti visibility (dokumentasi: MDN: visibility ) mengatur apakah kotak elemen digambar atau tidak. Nilai hidden membuat kotak tidak terlihat, tetapi kotaknya tetap dihitung: elemen setelahnya tidak naik, lebar dan tinggi slot tetap tersedia, dan margin tetap bekerja. Meskipun tidak terlihat, kotak tersebut tidak menerima klik, tidak menerima fokus, dan tidak ada di accessibility tree — sama seperti display: none dari sisi interaksi.

Perbedaan paling menentukan ada pada keturunan. Properti visibility diwariskan, dan sebuah anak boleh mengambil alih dengan visibility: visible. Anak dari elemen display: none tidak punya keistimewaan itu, karena kotaknya sendiri tidak pernah dibuat.

Dalam praktik, visibility: hidden paling membantu ketika stabilitas layout lebih penting daripada ruang kosong: slot kartu yang menunggu data tidak boleh menggeser kartu di sekitarnya, grid jam pelajaran yang kolomnya harus tetap berjumlah sama, atau elemen yang sedang menunggu animasi masuk. Sebaliknya, bila ruang kosong justru membingungkan pengguna, display: none tetap pilihan yang lebih tepat.

Anak Bisa Kembali Tampil dengan visible #

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    .slot {
      height: 96px;
      outline: 2px dashed rgb(148, 163, 184);
      background: rgb(255, 255, 255);
    }
    .kotak {
      width: 200px; height: 80px;
      padding: 8px 12px;
      background: rgb(191, 219, 254);
    }
    #kotak-visibility { visibility: hidden; }
    #anak-visible { visibility: visible; }
  </style>
</head>
<body>
  <div class="slot">
    <div id="kotak-visibility" class="kotak">
      <span id="anak-visible">Anak tetap tampil</span>
    </div>
  </div>
</body>
</html>

Hasil di Browser:

Slot tetap setinggi 96px dan kotak biru menempati ruang 200×80px,
namun kotak tidak tergambar (computed visibility: hidden).
Hanya teks anak yang tampil di dalam slot — anak diberi
visibility: visible sehingga kembali terlihat di atas latar kosong.

Mari kita bedah dua deklarasi kuncinya:

1. Baris 12 (#kotak-visibility { visibility: hidden; }): kotak biru 200×80px tetap dipakai di dalam slot 96px, tetapi tidak digambar. Kita hanya mengetahui keberadaannya dari garis putus-putus milik slot.
2. Baris 13 (#anak-visible { visibility: visible; }): teks anak menolak warisan hidden dan tampil kembali. Pola ini berguna untuk komponen seperti tooltip: wadah disembunyikan, sedangkan bagian tertentu di dalamnya dihidupkan kembali.

Perbandingan Tiga Cara Menyembunyikan #

Demo chapter ini menampilkan ketiga teknik secara berdampingan. Tabel berikut merangkum perbedaannya:

Satu nilai lagi patut dikenal: visibility: collapse dirancang untuk baris dan kolom tabel. Pada elemen tersebut, baris disembunyikan tanpa mengubah tata letak bagian tabel lainnya; pada elemen non-tabel, perilakunya setara hidden. Karena dukungan di luar tabel tidak konsisten, gunakan collapse hanya pada baris tabel dan verifikasi tampilannya di browser target Anda. Detail perilaku tabel — mulai dari border-collapse hingga struktur baris dan kolom — menanti pada Section Tables dan Forms .

Pola pemakaian yang ringkas: pilih display: none ketika ruang harus benar-benar dilepas, visibility: hidden ketika slot layout harus dijaga, dan opacity semata-mata untuk efek visual transparansi.