Alihkan Visibilitas Saat Menyembunyikan Elemen - Trik CSS

Anonim

Tim pengembangan di Medium telah membahas beberapa praktik buruk yang merusak aksesibilitas. Dalam satu contoh, mereka berpendapat bahwa opacitytidak didukung dengan baik oleh pembaca layar sehingga jika kita ingin menyembunyikan elemen dalam transisi maka kita harus selalu menggunakan visibilityatribut juga:

.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 opacity dan visibility masih meninggalkan elemen dalam alur dokumen. Jika Anda perlu mengeluarkannya dari aliran, ada lebih banyak pekerjaan yang harus dilakukan. Faktanya, inilah cara untuk memikirkan mereka…

bisa membuat sesuatu tidak terlihat bisa membuat sesuatu tidak bisa diklik menghapus dari aliran dokumen dapat dialihkan bisa dibalik pada anak
kegelapan ya tidak tidak Iya tidak
visibilitas ya ya tidak Iya Iya
layar ya ya ya tidak tidak
pointer-peristiwa tidak ya tidak tidak tidak

Jika Anda perlu mengubah nilai tampilan elemen setelah memudar, itu lebih sulit. Tidak mungkin dalam CSS karena displaytidak dapat dialihkan. Snook telah menulis tentang ini, termasuk beberapa JavaScript untuk membantu.