OrtaHTML & CSSFrontend

CSS'te display: none, visibility: hidden ve opacity: 0 arasındaki fark nedir?

Cevap

ÖzellikYer kaplar mı?Tıklanabilir mi?Ekran okuyucu okur mu?
display: noneHayır, akıştan çıkarHayırHayır
visibility: hiddenEvet, boşluk kalırHayırHayır
opacity: 0EvetEvetEvet

opacity ve visibility geçiş (transition) ile animasyon yapılabilir, display yapılamaz.

Bir metni görsel olarak gizleyip ekran okuyuculara bırakmak için ayrı bir "visually-hidden" sınıfı kullanılır:

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

Mülakat Defteri editörleri ·

  1. Semantik HTML nedir, neden önemlidir?KolayHTML & CSSFrontend
  2. CSS box model nedir? box-sizing: border-box ne işe yarar?KolayHTML & CSSFrontend
  3. position değerleri nelerdir?KolayHTML & CSSFrontend
  4. Flexbox ile Grid arasındaki fark nedir? Hangisini ne zaman seçersiniz?OrtaHTML & CSSFrontend
  5. CSS specificity nasıl hesaplanır?OrtaHTML & CSSFrontend
  6. Pseudo-class ile pseudo-element arasındaki fark nedir?OrtaHTML & CSSFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle