Görünürlük: gizli ve ekran: hiçbiri arasındaki fark nedir?

CSS kuralları visibility:hiddenve display:noneher ikisi de öğenin görünmemesine neden olur. Bu eşanlamlılar mı?

display:nonesöz konusu etiketin sayfada hiç görünmeyeceği anlamına gelir (yine de dom ile etkileşime girebilirsiniz). Diğer etiketler arasında boşluk bırakılmaz.

visibility:hiddenbunun aksine display:noneetiket görünür değildir, ancak sayfada etiket için yer ayrılmıştır. Etiket oluşturulur, sayfada görünmez.

Örneğin:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Değiştirme [style-tag-value]ile display:nonesonuçlardan:

test |   | test

Değiştirme [style-tag-value]ile visibility:hiddensonuçlardan:

test |                        | test

Bunlar eşanlamlı değildir.

display:none öğeyi sayfanın normal akışından kaldırır ve diğer öğelerin dolmasına izin verir.

visibility:hidden öğeyi sayfanın normal akışında, yer kaplayacak şekilde bırakır.

Bir eğlence parkına binmek için sıraya girdiğinizi ve hatta birisinin o kadar kaba davrandığını düşünün, güvenlik onları hattan koparır. Sıradaki herkes, şimdi boş olan alanı doldurmak için bir konum ileri gider. Bu gibi display:none.

Bunu benzer durumla karşılaştırın, ancak önünüzdeki birinin görünmezlik pelerini giydiğini. Çizgiyi görüntülerken, boş bir alan varmış gibi görünecektir, ancak insanlar o boş görünümlü alanı gerçekten dolduramaz çünkü biri hala oradadır. Bu gibi visibility:hidden.

Sorulmasa da eklemeye değer bir şey, nesneyi tamamen şeffaf hale getirmenin üçüncü bir seçeneğinin olmasıdır. Düşünmek:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Sonucu görmek için yukarıdaki "Kod snippet'ini çalıştır" düğmesini tıkladığınızdan emin olun.)

1 ve 2 arasındaki fark zaten belirtildi (yani 2 hala yer kaplıyor). Ancak, 2 ile 3 arasında bir fark vardır: 3. durumda, fare bağlantının üzerine geldiğinde yine de ele geçecektir ve kullanıcı yine de bağlantıyı tıklayabilir ve Javascript olayları yine de bağlantıyı tetikler. Bu genellikle istediğiniz davranış değildir (ama bazen öyle olabilir?).

Başka bir fark, metni seçip düz metin olarak kopyala / yapıştır seçerseniz, aşağıdakileri elde edersiniz:

1st link.
2nd  link.
3rd unseen link.

3. durumda metin kopyalanır. Belki bu bir tür filigran basmak için yararlı olabilir veya dikkatsizce bir kullanıcı içeriğinizi kopyalarsa / yapıştırırsa görünecek bir telif hakkı bildirimini gizlemek istiyorsanız?

display:none öğeyi düzen akışından kaldırır.

visibility:hidden gizler ama boşluk bırakır.

Çocuk düğümleri söz konusu olduğunda büyük bir fark vardır. Örneğin: Bir üst div öğeniz ve bir iç içe alt div öğeniz varsa. Yani şöyle yazarsanız:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Bu durumda div'lerin hiçbiri görünmez. Ama böyle yazarsanız:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Daha sonra alt div görünür, üst div gösterilmez.

Bunlar eşanlamlı değildir display: none; öğeyi sayfanın akışından kaldırır ve sayfanın geri kalanı sanki orada değilmiş gibi akar.

visibility: hidden öğeyi sayfa akışından değil görünümden gizler ve sayfada boşluk bırakır.

display: none öğeyi sayfadan tamamen kaldırır ve sayfa, öğe hiç orada değilmiş gibi oluşturulur.

Visibility: hidden artık göremeseniz bile belge akışında boşluk bırakır.

Bu, ne yaptığınıza bağlı olarak büyük bir fark yaratabilir veya etmeyebilir.

İle visibility:hiddennesne hala sayfadaki dikey yüksekliğini kaplar. İle display:nonetamamen kaldırılır. Bir görüntünün altında metniniz varsa ve bunu yaparsanız display:none, o metin görüntünün bulunduğu alanı doldurmak için yukarı kayar. Görünürlük yaparsanız: gizli metin aynı konumda kalır.

display:noneöğeyi gizleyecek ve alanın kapladığı alanı visibility:hiddendaraltacakken, öğeyi gizleyecek ve eleman alanını koruyacaktır. display: none, IE ve Safari'nin eski sürümlerinde javascript'te bulunan bazı özellikleri de etkilemez.

Diğer tüm yanıtlara ek olarak, IE8 için önemli bir fark vardır: display:noneÖğenin genişliğini veya yüksekliğini kullanır ve almaya çalışırsanız, IE8 0 değerini döndürür (diğer tarayıcılar gerçek boyutları döndürür). IE8 yalnızca için doğru genişliği veya yüksekliği döndürür visibility:hidden.

visibility:hiddenalanı korur; display:noneyapmaz.

display: none; 

Sayfada mevcut olmayacak ve yer kaplamaz.

visibility: hidden; 

bir öğeyi gizler, ancak yine de öncekiyle aynı alanı kaplar. Öğe gizlenecek, ancak yine de düzeni etkileyecektir.

visibility: hiddenalanı korurken mekanı display: nonekorumaz.

Görüntülü Reklam Ağı Yok Örnek: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Görünürlük Gizli Örneği: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Görünürlük özelliği olarak ayarlanırsa "hidden", tarayıcı görünmez olsa da içerik için sayfada yer kaplar.
Ancak, bir nesne ayarladığımızda "display:none", tarayıcı içeriği için sayfada yer ayırmaz.

Misal:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Detayları göster

visibility:hidden öğeyi sayfada tutacak ve bu alanı kaplayacak, ancak kullanıcıya gösterilmeyecektir.

display:none sayfada bulunmayacak ve yer kaplamıyor.

Bir diğer fark, visibility:hiddengerçekten, gerçekten eski tarayıcılarda çalışıyor ve display:noneçalışmıyor:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Fark, stilin ötesine geçer ve öğelerin JavaScript ile manipüle edildiğinde nasıl davrandıklarına yansır.

Etkileri ve yan etkileri display: none:

• hedef eleman belge akışından çıkarılır (diğer elemanların yerleşimini etkilemez);
• tüm torunlar etkilenir (her ikisi de gösterilmez ve bu mirastan “çıkamaz”);
• Ölçümler hedef elemanı için ne de torunları için yapılamaz - onlar böylece hiç işlenmez onların clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), tüm iade 0s.

Etkileri ve yan etkileri visibility: hidden:

• hedef eleman görünümden gizlenir, ancak akıştan çıkarılmaz ve normal alanını işgal ederek düzeni etkiler;
• innerText(ancak değil innerHTML) hedef öğenin ve torunlarının boş dize döndürür.

display:none;öğeyi göstermeyecek ve sayfadaki öğe için yer ayırmayacak, öğeyi sayfada visibility:hidden;göstermeyecek ancak sayfada yer ayıramayacaktır. Her iki durumda da DOM'daki öğeye erişebiliriz. Daha iyi anlamak için lütfen aşağıdaki koda bakın: display: none vs visibility: hidden

Burada çok sayıda ayrıntılı cevap var, ancak bunun sonuçları olduğu için erişilebilirliği ele almam gerektiğini düşündüm.

display: none;ve visibility: hidden;tüm ekran okuyucu yazılımları tarafından okunamayabilir. Görme engelli kullanıcıların neler yaşayacağını unutmayın.

Soru aynı zamanda eş anlamlıları da soruyor. text-indent: -9999px;bir diğeri kabaca eşdeğerdir. Buradaki önemli fark, text-indentekran okuyucular tarafından sıklıkla okunmasıdır. Kullanıcılar yine de bağlantıya sekebilirler çünkü kötü bir deneyim olabilir.

Erişilebilirlik için bugün kullandığım şey, ekran okuyucuları tarafından görülebilirken bir öğeyi gizlemek için kullanılan stillerin birleşimidir.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

İyi bir uygulama, ana içerik gövdesinin bağlantısına bir "İçeriğe geç" bağlantısı oluşturmaktır. Görme engelli kullanıcılar büyük olasılıkla her sayfada tüm gezinti ağacınızı dinlemek istemezler. Bağlantıyı görsel olarak gizleyin. Kullanıcılar bağlantıya erişmek için sekmeye basabilir.

Erişilebilirlik ve gizli içerik hakkında daha fazla bilgi için bkz:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/