Togol Penglihatan Semasa Menyembunyikan Elemen - Trik CSS

Anonim

Pasukan pembangunan di Medium telah membincangkan beberapa amalan buruk yang melanggar kebolehcapaian. Dalam satu contoh, mereka berpendapat bahawa opacitytidak disokong dengan baik oleh pembaca skrin dan jadi jika kita ingin menyembunyikan elemen dalam peralihan maka kita juga harus selalu menggunakan visibilityatribut:

.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; )

Ingat bahawa kelegapan dan keterlihatan masih meninggalkan elemen dalam aliran dokumen. Sekiranya anda perlu mengeluarkannya dari aliran, masih ada banyak kerja yang perlu dilakukan. Sebenarnya inilah cara untuk memikirkannya ...

boleh menjadikan perkara tidak kelihatan boleh membuat perkara tidak dapat diklik membuang dari aliran doc boleh diubah boleh diterbalikkan pada anak
kelegapan ya tidak tidak iya tidak
penglihatan ya ya tidak iya iya
paparan ya ya ya tidak tidak
penunjuk-peristiwa tidak ya tidak tidak tidak

Sekiranya anda perlu menukar nilai paparan elemen setelah pudar, itu lebih sukar. Tidak mungkin berlaku dalam CSS kerana displaytidak boleh dipindahtangankan. Snook telah menulis mengenai ini, termasuk beberapa JavaScript untuk membantu.