cssdisplayvisibilityPemula3 mnt baca

Menyembunyikan Elemen

display: none vs visibility: hidden vs opacity: 0. Beda perilaku, beda kegunaan.

Tiga cara menyembunyikan

css

.hilang-total {
  display: none; /* hilang dari layout: ruangnya ikut hilang */
}

.hilang-visual {
  visibility: hidden; /* tak terlihat, tapi ruangnya tetap ada */
}

.hilang-halus {
  opacity: 0; /* transparan, tapi masih bisa diklik! */
}

Kapan pakai apa?

display: none: elemen benar-benar tidak ada (menu mobile tertutup, tab tidak aktif). Tidak bisa dianimasikan (muncul/hilang instan).
visibility: hidden: sembunyikan tapi jaga layout tidak bergeser. Bisa dianimasikan bersama opacity.
opacity: 0: untuk transisi fade. Ingat: elemen masih menerima klik! Pasangkan dengan pointer-events: none atau visibility.

Kombinasi favorit untuk fade yang benar:

css

.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal.buka {
  opacity: 1;
  visibility: visible;
}

Catatan teknis: display: none juga menyembunyikan elemen dari screen reader. Kalau tujuannya hanya visual tapi konten harus terbaca screen reader (misal label), pakai teknik "visually-hidden" (posisi absolut + clip), bukan display none.

Analogi: sulap menghilangkan

Tiga cara menghilangkan sesuatu dari panggung:

display: none: pesulap benar-benar keluar panggung, kursinya ikut dibawa pergi. Penonton lain merapat mengisi tempatnya.
visibility: hidden: pesulap memakai jubah tembus pandang. Tidak terlihat, tapi kursinya tetap di sana dan tidak ada yang boleh duduk.
opacity: 0: pesulap memakai jubah tembus pandang TAPI masih bisa disentuh dan diajak bicara (tetap interaktif!).

Kenapa tiga cara? (KENAPA)

Karena "menghilang" punya kebutuhan berbeda:

Struktural (tab tidak aktif, menu tertutup): pakai display: none. Elemen benar-benar tidak ada, tidak terbaca screen reader, tidak ikut layout.
Stabil (placeholder loading, layout yang tidak boleh bergeser): pakai visibility: hidden. Ruang dipesan sehingga halaman tidak "melompat" saat elemen muncul.
Animasi (fade in/out): pakai opacity + visibility karena display tidak bisa ditransisikan.

Level 1, salah: modal opacity 0 tapi masih bisa diklik.

css

/* SALAH: tombol di belakang modal tidak bisa diklik karena modal tak terlihat menutupinya! */
.modal {
  opacity: 0;
}

Ini bug "klik hantu": pengguna mengklik tombol, tapi yang merespons modal tak terlihat.

Level 2, benar: kombinasikan ketiganya.

css

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal.buka {
  opacity: 1;
  visibility: visible;
}

visibility menangani "bisa diklik atau tidak" (hidden = tidak), opacity menangani animasi fade. Kombinasi sempurna.

Kesalahan umum pemula

Salah: display none untuk animasi. display tidak punya nilai antara sehingga tidak bisa ditransisikan. Elemen akan muncul/hilang instan. Mau animasi? Pakai pola opacity + visibility di atas.

Salah: visibility hidden untuk menyembunyikan dari screen reader. visibility: hidden JUGA menyembunyikan dari screen reader (seperti display: none). Kalau tujuannya hanya visual (elemen tetap terbaca), pakai teknik visually-hidden:

css

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

Salah: lupa visibility saat pakai opacity 0. Sudah dibahas: klik hantu. Selalu pasangkan.

Latihan kilat

Modal dengan opacity: 0 masih memblokir klik tombol di belakangnya. Jelaskan bugnya dan perbaikannya.
Kamu ingin elemen hilang dari layout DAN tidak terbaca screen reader. Properti apa? Kamu ingin hilang visual tapi ruang tetap ada. Properti apa?
Kenapa display: none tidak bisa dianimasikan dengan transition?

Kunci: (1) "Klik hantu": elemen transparan tetap interaktif; perbaiki dengan visibility: hidden; + pointer-events: none;. (2) display: none; dan visibility: hidden;. (3) display tidak punya nilai antara untuk diinterpolasi; pakai pola opacity + visibility.

Istilah kunci

display: none: hilang + ruang ikut hilang.
visibility: hidden: tak terlihat tapi ruang tetap ada.
opacity: 0: transparan tapi tetap interaktif (klik hantu!).
pointer-events: none: mematikan interaksi mouse/sentuh.
visually-hidden: teknik sembunyi visual tapi tetap terbaca screen reader.

Rangkuman

display: none = hilang total. visibility: hidden = hilang tapi ruang tetap. opacity: 0 = transparan tapi masih interaktif. Pilih sesuai kebutuhan, dan ingat aksesibilitas.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Uji Klik Hantu

Di playground:

Coba klik area kosong tempat kotak C berada. Apa yang terjadi? (Petunjuk: cek apakah kursor berubah.) Tulis di komentar.
Perbaiki kotak C agar tidak bisa diklik saat tak terlihat: tambahkan properti yang tepat.
Buat kotak B muncul kembali saat di-hover (tanpa JavaScript).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox