Váltsa át a láthatóságot az elemek elrejtésekor - CSS-trükkök

Anonim

A Medium fejlesztőcsoportja megvitatott néhány rossz gyakorlatot, amelyek megsértik az akadálymentességet. Az egyik példában azt állítják, hogy opacitya képernyőolvasók ezt nem támogatják, ezért ha el akarunk rejteni egy elemet egy átmenet során, akkor mindig az visibilityattribútumot is használnunk kell :

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

Ne feledje, hogy az átlátszatlanság és a láthatóság továbbra is egy elemet hagy a dokumentumfolyamban. Ha el kell távolítania az áramlástól, akkor még több a munka. Valójában itt van egy mód arra, hogy gondoljon rájuk ...

láthatatlanná teheti a dolgot kattinthatatlanná teheti a dolgot eltávolítja a doc folyamatból át lehet állítani gyermeknél megfordítható
átlátszatlanság ya nem nem Igen nem
láthatóság ya ya nem Igen Igen
kijelző ya ya ya nem nem
pointer-események nem ya nem nem nem

Ha egy elem megjelenési értékét meg kell változtatni a fakulás után, akkor ez keményebb. Nem igazán lehetséges a CSS-ben, mivel displaynem lehet átállítani. Snook írt erről, beleértve néhány JavaScript-et is.