Basculer la visibilité lors du masquage des éléments - Astuces CSS

Anonim

L'équipe de développement de Medium a discuté de certaines mauvaises pratiques qui brisent l'accessibilité. Dans un exemple, ils soutiennent que ce opacityn'est pas bien pris en charge par les lecteurs d'écran et donc si nous voulons masquer un élément dans une transition, nous devrions toujours utiliser l' visibilityattribut aussi:

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

N'oubliez pas que l'opacité et la visibilité laissent toujours un élément dans le flux de documents. Si vous devez le supprimer du flux, il reste du travail à faire. En fait, voici une façon de penser à eux ...

peut rendre la chose invisible peut rendre la chose non cliquable supprime du flux de documents peut être transformé peut être inversé sur l'enfant
opacité toi non non Oui non
visibilité toi toi non Oui Oui
affichage toi toi toi non non
événements de pointeur non toi non non non

Si vous devez changer la valeur d'affichage d'un élément après un fondu, c'est plus difficile. Pas vraiment possible en CSS car displaynon transposable. Snook a écrit à ce sujet, y compris du JavaScript pour vous aider.