CSS Academy · Pelajaran

Visibility vs Display None

Pelajari kapan menggunakan visibility: hidden dibandingkan display: none dan pengaruh masing-masing pada tata letak.

Visibility vs Display None adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Tiga Cara Menyembunyikan Elemen

CSS menyediakan tiga metode umum untuk menyembunyikan elemen, masing-masing dengan dampak berbeda terhadap tata letak, aksesibilitas, dan interaksi:

display: none
visibility: hidden
opacity: 0

display: none

Elemen tersebut sepenuhnya dihapus dari tata letak. Elemen tidak menempati ruang, tidak interaktif, dan tidak dibaca oleh pembaca layar (pada sebagian besar implementasi). Elemen tetap ada di DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Elemen tersebut tidak terlihat tetapi tetap menempati ruang dalam tata letak. Elemen tidak dapat diklik dan tidak dibaca oleh pembaca layar. Cara ini cocok untuk menyembunyikan sesuatu tanpa menyebabkan pergeseran tata letak.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

Elemen tersebut tidak terlihat tetapi sepenuhnya interaktif. Elemen tetap menempati ruang dan merespons peristiwa (klik, saat kursor diarahkan). Pembaca layar mungkin masih membacanya.

<button class="transparent">Invisible but clickable</button>

Menimpa visibility: visible pada Elemen Anak

Elemen anak dapat menimpa visibility: hidden milik induknya dengan menetapkan visibility: visible. Hal ini tidak mungkin dilakukan dengan display: none—elemen anak mewarisinya secara mutlak.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Tabel Perbandingan

Referensi singkat:

display: none: tanpa ruang, tanpa klik, tidak dibaca
visibility: hidden: menempati ruang, tanpa klik, tidak dibaca
opacity: 0: menempati ruang, tetap dapat diklik, mungkin dibaca

Mentransisikan visibility

display tidak dapat ditransisikan. Untuk menampilkan atau menyembunyikan elemen secara bertahap, gabungkan visibility dengan opacity:

<div class="dropdown open">Dropdown menu content</div>

Penyembunyian yang Aksesibel dengan SR-only

Pola khusus pembaca layar menyembunyikan konten secara visual tetapi tetap membuatnya dapat diakses teknologi bantu:

<button>Save <span class="sr-only">your document now</span></button>

Atribut hidden dibandingkan dengan CSS

Atribut HTML hidden menerapkan display: none melalui stylesheet agen pengguna peramban. Atribut ini aksesibel dan semantis, tetapi dapat ditimpa oleh spesifisitas CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden melewati proses perenderan bagian di luar layar, tetapi mempertahankan pohon aksesibilitas dan tata letaknya. Ini adalah teknik performa modern untuk halaman yang panjang.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Agar elemen tetap terlihat tetapi tidak interaktif, gunakan pointer-events: none. Klik dan gerakan kursor melewati elemen tersebut akan diteruskan ke elemen di bawahnya.

<div class="overlay">Clicks pass through this overlay</div>

Pemeriksaan Singkat

Teknik mana yang menyembunyikan elemen sambil mempertahankan ruang tata letak yang ditempatinya?

Ringkasan

display: none menghapus elemen sepenuhnya dari tata letak. visibility: hidden menyembunyikannya sambil mempertahankan ruang. opacity: 0 menyembunyikannya tetapi tetap membuatnya interaktif. Untuk penyembunyian yang aksesibel, gunakan pola .sr-only. Gabungkan visibility dan opacity untuk transisi yang memudar.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Visibility vs Display None” gratis?

Ya — teks lengkap “Visibility vs Display None” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Visibility vs Display None”?

Pelajari kapan menggunakan visibility: hidden dibandingkan display: none dan pengaruh masing-masing pada tata letak. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Visibility vs Display None” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy