Uključivanje / isključivanje vidljivosti prilikom skrivanja elemenata - CSS-trikovi

Anonim

Razvojni tim u Mediumu razgovarao je o nekim lošim praksama koje narušavaju pristupačnost. U jednom primjeru tvrde da opacityčitači zaslona ne podržavaju dobro, pa ako želimo sakriti element u prijelazu, uvijek bismo trebali koristiti i visibilityatribut:

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

Imajte na umu da neprozirnost i vidljivost i dalje ostavljaju element u protoku dokumenata. Ako ga trebate ukloniti iz protoka, ima još posla. Zapravo, evo načina da razmišljamo o njima ...

može stvar učiniti nevidljivom može stvar učiniti ne kliknuti uklanja iz protoka dok može se prijeći može se obrnuti na djetetu
neprozirnost da Ne Ne Da Ne
vidljivost da da Ne Da Da
prikaz da da da Ne Ne
pokazivački događaji Ne da Ne Ne Ne

Ako trebate promijeniti prikazanu vrijednost elementa nakon blijeđenja, to je teže. To zapravo nije moguće u CSS-u jer displaynije prolazno. Snook je o tome napisao, uključujući i neki JavaScript za pomoć.