Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Visibility: Hidden vs Display: None

Memilih properti yang tepat sangat krusial agar tata letak (layout) website Anda tidak berantakan saat ada elemen yang muncul atau menghilang secara dinamis.

1. Display: None (Menghapus Elemen)

Properti ini benar-benar menghapus elemen dari Document Flow (alur dokumen).

• Ruang: Elemen dianggap tidak ada. Ruang yang seharusnya ditempati oleh elemen tersebut akan diambil alih oleh elemen lain di sekitarnya.

• Interaksi: Tidak dapat diklik, tidak bisa menerima fokus, dan tidak terbaca oleh screen reader (kecuali diatur khusus).

• Performa: Memicu reflow (kalku lasi ulang tata letak) pada halaman saat statusnya berubah.

• Contoh Penggunaan: Menu hamburger pada mobile yang hanya muncul saat diklik, atau tab konten yang berganti-ganti.

2. Visibility: Hidden (Menyembunyikan Elemen)

Properti ini menyembunyikan elemen secara visual, tetapi elemen tersebut tetap memakan ruang di halaman.

• Ruang: Elemen tetap berada di tempatnya. Bayangkan elemen tersebut menjadi transparan sepenuhnya, tetapi tetap "berdiri" di sana.

• Interaksi: Tidak dapat diklik atau menerima fokus, tetapi ruang kosongnya tetap dipertahankan sehingga tidak mengganggu posisi elemen tetangganya.

• Inheritence: Jika induk memiliki visibility: hidden, anak-anaknya bisa tampil kembali jika diberi visibility: visible. (Berbeda dengan display: none di mana jika induk hilang, semua anak pasti hilang).

• Contoh Penggunaan: Pesan error pada form yang ruangnya sudah disediakan agar layout tidak "melompat" saat pesan tersebut muncul secara mendadak.

3. Tab el Perbandingan Cepat

Tutorial: Melihat Perbedaan secara Visual

Salin kode ini untuk melihat bagaimana elemen tetangga bereaksi terhadap kedua properti ini.

Struktur HTML

<div class="container"> <div class="box red">Kotak 1div> <div class="box green target">Kotak 2 (Target)div> <div class="box blue">Kotak 3div>
div> <button onclick="hideDisplay()">Gunakan Display Nonebutton>
<button onclick="hideVisibility()">Gunakan Visibility Hiddenbutton>

Kode CSS

.container { display: flex; gap: 10px;
} .box { width: 100px; height: 100px; color: white; display: flex; align-items: center; justify-content: center;
} .red { background: #e74c3c; }
.green { background: #27ae60; }
.blue { background: #3498db; } /* Class untuk Testing */
.d-none { display: none; }
.v-hidden { visibility: hidden; }

< !---->

Kapan Menggunakan yang Mana?

1. Gunakan display: none saat:

   • Anda ingin menyembunyikan elemen secara total tanpa meninggalkan jejak ruang kosong.

   • Membuat desain responsif (misal: menyembunyikan sidebar di layar HP).

   • Membuat komponen yang kontennya berganti-ganti (Slider, Accordion, Tab).

2. Gunakan visibility: hidden saat:

   • Anda ingin menjaga stabilitas layout agar elemen lain tidak bergeser saat elemen tersebut hilang/muncul.

   • Membuat elemen tetap ada di DOM untuk kebutuhan pengukuran skrip (JavaScript) tetapi tidak ingin user melihatnya.

   • Ingin melakukan animasi transisi halus (seperti mengubah opacity bersamaan dengan visibility).

Tips Pro: Untuk proyek SatuMed ia, jika Anda memiliki skeleton loader (tampilan loading), biasanya visibility: hidden lebih baik digunakan pada konten asli agar ukuran kontainer tetap stabil sementara data sedang diambil dari database.