Alternar visibilidad al ocultar elementos - Trucos CSS

Anonim

El equipo de desarrollo de Medium ha discutido algunas malas prácticas que rompen la accesibilidad. En un ejemplo, argumentan que los opacitylectores de pantalla no lo admiten bien, por lo que si queremos ocultar un elemento en una transición, siempre deberíamos usar el visibilityatributo también:

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

Recuerde que la opacidad y la visibilidad aún dejan un elemento en el flujo del documento. Si necesita eliminarlo del flujo, hay más trabajo por hacer. De hecho, aquí hay una forma de pensar en ellos ...

puede hacer algo invisible puede hacer que no se pueda hacer clic elimina del flujo de documentos se puede cambiar se puede revertir en el niño
opacidad ya No No No
visibilidad ya ya No
mostrar ya ya ya No No
puntero-eventos No ya No No No

Si necesita cambiar el valor de visualización de un elemento después de un desvanecimiento, eso es más difícil. Realmente no es posible en CSS ya displayque no es transitable. Snook ha escrito sobre esto, incluido algo de JavaScript para ayudar.