CSS Academy · Ders

Visibility ve Display None

visibility: hidden ile display: none özelliklerinin ne zaman kullanılacağını ve her birinin düzeni nasıl etkilediğini öğrenin.

Visibility ve Display None, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Öğeleri Gizlemenin Üç Yolu

CSS, her birinin yerleşim, erişilebilirlik ve etkileşim üzerinde farklı etkileri olan üç yaygın öğe gizleme yöntemi sunar:

display: none
visibility: hidden
opacity: 0

display: none

Öğe yerleşimden tamamen kaldırılır. Hiç yer kaplamaz, etkileşimli değildir ve ekran okuyucular tarafından okunmaz (çoğu uygulamada). Öğe DOM'da varlığını sürdürür.

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

visibility: hidden

Öğe görünmez olur, ancak yerleşimde yer kaplamayı sürdürür. Tıklanamaz ve ekran okuyucular tarafından okunmaz. Yerleşim kaymalarına neden olmadan bir şeyi gizlemek için uygundur.

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

opacity: 0

Öğe görünmezdir, ancak tamamen etkileşimlidir. Yer kaplamayı sürdürür ve olaylara (tıklamalar, fareyle üzerine gelmeler) yanıt verir. Ekran okuyucular yine de öğeyi okuyabilir.

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

visibility: visible Geçersiz Kılması

Bir alt öğe, visibility: visible ayarlayarak üst öğenin visibility: hidden değerini geçersiz kılabilir. Bu, display: none için mümkün değildir; alt öğeler bu değeri kesin olarak devralır.

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

Karşılaştırma Tablosu

Kısa başvuru:

display: none: yer yok, tıklama yok, okunmaz
visibility: hidden: yer kaplar, tıklama yok, okunmaz
opacity: 0: yer kaplar, tıklanabilir, okunabilir

visibility Geçişleri

display ile geçiş yapılamaz. Öğeleri belirme/kaybolma şeklinde canlandırmak için visibility ile opacity değerlerini birlikte kullanın:

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

SR-only ile Erişilebilir Gizleme

Yalnızca ekran okuyucu deseni, içeriği görsel olarak gizler ancak yardımcı teknolojiler için erişilebilir tutar:

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

hidden Özniteliği ve CSS Karşılaştırması

HTML'deki hidden özniteliği, tarayıcının kullanıcı aracısı stil sayfası aracılığıyla display: none uygular. Erişilebilir ve anlamsaldır; ancak CSS özgüllüğüyle geçersiz kılınabilir.

<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, ekran dışındaki bölümlerin oluşturulmasını atlar; ancak bunların erişilebilirlik ağacını ve yerleşimini korur. Uzun sayfalar için modern bir performans tekniğidir.

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

pointer-events: none

Bir öğeyi görünür ancak etkileşimsiz tutmak için pointer-events: none kullanın. Tıklamalar ve fareyle üzerine gelme olayları öğenin içinden geçerek altındaki öğelere ulaşır.

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

Kısa Kontrol

Hangi teknik, bir öğeyi kapladığı yerleşim alanını koruyarak gizler?

Özet

display: none, bir öğeyi yerleşimden tamamen kaldırır. visibility: hidden, alanı koruyarak öğeyi gizler. opacity: 0, öğeyi gizler ancak etkileşimli kalmasını sağlar. Erişilebilir gizleme için .sr-only desenini kullanın. Belirme/kaybolma geçişleri için visibility ile opacity değerlerini birlikte kullanın.

Sıkça Sorulan Sorular

“Visibility ve Display None” dersi ücretsiz mi?

Evet — “Visibility ve Display None” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Visibility ve Display None” dersinde ne öğreneceğim?

visibility: hidden ile display: none özelliklerinin ne zaman kullanılacağını ve her birinin düzeni nasıl etkilediğini öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Visibility ve Display None” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön