Öğeleri Gizlerken Görünürlüğü Değiştir - CSS Hileleri

Anonim

Medium'daki geliştirme ekibi, erişilebilirliği bozan bazı kötü uygulamaları tartıştı. Bir örnekte, opacityekran okuyucular tarafından iyi desteklenmediğini iddia ediyorlar ve bu nedenle, bir geçişte bir öğeyi gizlemek istiyorsak, o zaman her zaman visibilityözniteliği de kullanmalıyız:

.m-fadeOut ( visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; ) .m-fadeIn ( visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; )

Şeffaflığın ve görünürlüğün belge akışında hala bir öğe bıraktığını unutmayın. Akıştan çıkarmanız gerekirse, yapılacak daha çok iş vardır. Aslında işte onlar hakkında düşünmenin bir yolu…

bir şeyi görünmez yapabilir bir şeyi tıklanamaz hale getirebilir belge akışından kaldırır geçiş yapılabilir çocukta tersine çevrilebilir
opaklık evet Hayır Hayır Evet Hayır
görünürlük evet evet Hayır Evet Evet
Görüntüle evet evet evet Hayır Hayır
işaretçi olayları Hayır evet Hayır Hayır Hayır

Solma sonrasında bir öğenin görüntü değerini değiştirmeniz gerekirse, bu daha zordur. CSS'de displaygeçiş yapılamadığı için gerçekten mümkün değil. Snook, yardımcı olacak bazı JavaScript dahil olmak üzere bu konuda yazdı.