Превключване на видимостта при скриване на елементи - CSS-трикове

Anonim

Екипът за разработка на Medium обсъди някои лоши практики, които нарушават достъпността. В един пример те твърдят, че opacityне се поддържа добре от екранните четци и затова, ако искаме да скрием елемент в преход, винаги трябва да използваме и visibilityатрибута:

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

Не забравяйте, че непрозрачността и видимостта все още оставят елемент в документооборота. Ако трябва да го премахнете от потока, има още работа. Всъщност тук има начин да мислим за тях ...

може да направи нещо невидимо може да направи нещо некликващо премахва от потока на документа може да се прехвърли може да се обърне на детето
непрозрачност у а не не да не
видимост у а у а не да да
дисплей у а у а у а не не
указател-събития не у а не не не

Ако трябва да промените стойността на дисплея на елемент след избледняване, това е по-трудно. Наистина не е възможно в CSS, тъй като displayне е преходен. Snook е писал за това, включително някои JavaScript за помощ.