Razlika između "display: none" i "vidljivosti: skrivena" u CSS-u

Moguće je da, dok radite na razvoju web stranica, trebate "sakriti" određena područja stavki iz nekog razloga. Možete, naravno, jednostavno ukloniti stavke u pitanjima iz HTML oznake, ali što ako želite da ostanu u kodu, ali se ne prikazuju na zaslonu preglednika iz bilo kojeg razloga (i pregledat ćemo razloge za učinite to uskoro). Da biste zadržali element HTML-a, ali ga sakrijte za prikazivanje, obratit ćete se na CSS.

Dva najčešća načina prikrivanja elementa u HTML-u koristit će CSS svojstva za "prikaz" ili "vidljivost". Na prvi pogled, ta dva svojstva mogu činiti uglavnom istu stvar, ali svaka od njih ima različite razlike s kojima biste trebali biti svjesni. Pogledajmo razlike između zaslona: none i vidljivosti: skrivene.

Vidljivost

Upotreba CSS pariteta / vrijednosti pariteta vidljivosti: skrivena skriva element iz preglednika. međutim, taj skriveni element i dalje zauzima prostor u rasporedu. To je kao da ste u osnovi učinili element nevidljivim, ali ipak ostaje na mjestu i zauzima prostor za koji bi se preuzeo ako je ostao sam.

Ako stavite DIV na svoju stranicu i upotrijebite CSS da biste mu dali dimenzije da zauzimaju 100x100 piksela, vidljivost: skriveno svojstvo neće učiniti DIV prikazati na zaslonu, ali će tekst koji slijedi učinit će kao da je još uvijek tamo, poštujući to 100x100 razmaka.

Iskreno, vidljivost imovine nije nešto što smo koristili vrlo često, a sigurno ne sami. Ako također upotrebljavamo i druge CSS svojstva kao što je pozicioniranje kako bismo postigli izgled koji smo željeli za određeni element, tada bismo mogli koristiti vidljivost kako bismo je sakrili u početku, samo da je "uključimo" na lebdjeti. To je jedna moguća upotreba ove nekretnine, ali opet, to nije nešto s kojim se okrećemo s bilo kojom frekvencijom.

Prikaz

Za razliku od svojstva vidljivosti, koja ostavlja element u normalnom toku dokumenta, prikazuje se: nitko ne uklanja element iz dokumenta. Ne zauzima nikakav prostor, iako je HTML još uvijek u izvornom kodu. To je zato što je uklonjeno iz tijeka dokumenta. Za sve namjere i svrhe, stavka je nestala. To može biti dobra stvar ili loša stvar, ovisno o tome što su vaše namjere. Također može oštetiti vašu stranicu ako zloupotrijebite ovu nekretninu!

Kod testiranja stranice često koristimo "display: none". Ako nam je potreban prostor za "odlazak" malo, kako bismo mogli testirati druga područja stranice, možemo koristiti prikaz: ništa za to. Međutim, treba zapamtiti da se element treba vratiti na stranicu prije stvarnog pokretanja tog web mjesta. To je zbog toga što tražilice ili čitači zaslona ne vide stavku koja se uklanja iz tijeka dokumenta u ovoj metodi, iako ona može ostati u HTML oznakama. U prošlosti je ova metoda korištena kao crno-šefova metoda koja pokušava utjecati na ljestvici tražilice, tako da stavke koje nisu prikazane mogu biti crvena zastava za Google kako bi razmotrila zašto se taj pristup upotrebljava.

Jedan od načina na koji nađemo prikaz: nitko nije koristan, a gdje ga upotrebljavamo na web-produkcijama za proizvodnju uživo, jest kada izradimo responzivnu web-lokaciju koja može imati elemente dostupne za jednu veličinu prikaza, ali ne i za druge. Možete koristiti prikaz: none da biste sakrili taj element, a kasnije ga ponovno uključite s medijskim upitima . Ovo je prihvatljiva upotreba zaslona: nijedna, jer ne pokušavate sakriti ništa zbog neugodnih razloga, ali imate legitimnu potrebu da to učinite.

Izvorni članak Jennifer Krynin. Uredio je Jeremy Girard na 3/3/17