Vaihda näkyvyyttä piilotettaessa elementtejä CSS-temppuja

Anonim

Mediumin kehitystiimi on keskustellut huonoista käytännöistä, jotka rikkovat saavutettavuutta. Yhdessä esimerkissä he väittävät, että opacitynäytönlukijat eivät tue sitä hyvin, joten jos haluamme piilottaa elementin siirtymässä, meidän tulisi aina käyttää myös visibilitymääritettä:

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

Muista, että peittävyys ja näkyvyys jättävät edelleen osan dokumenttivirtaan. Jos haluat poistaa sen virtauksesta, on enemmän töitä. Itse asiassa tässä on tapa ajatella heitä ...

voi tehdä asiasta näkymättömän voi tehdä asiasta napsauttamattoman poistaa asiakirjavirrasta voidaan siirtää voidaan kääntää lapselle
opasiteetti ya ei ei Joo ei
näkyvyys ya ya ei Joo Joo
näyttö ya ya ya ei ei
osoitintapahtumat ei ya ei ei ei

Jos joudut muuttamaan elementin näyttöarvoa haalistumisen jälkeen, se on vaikeampi. Ei oikeastaan ​​mahdollista CSS: ssä, koska sitä displayei voi siirtää. Snook on kirjoittanut tästä, mukaan lukien joitain JavaScript-ohjeita.