Razlika između "prikaza: nema" i "vidljivosti: sakrivena" u CSS-u

Možda ima vremena, dok radite na razvoju web stranica, da morate "sakriti" određena područja stavki iz jednog ili drugog razloga. Možete, naravno, jednostavno ukloniti stavke u pitanjima iz HTML oznake, ali šta ako želite da ostane u kôdu, ali ne i prikazati na ekranu pregledača iz bilo kog razloga (a mi ćemo pregledati razloge za uradite ovo kratko). Da biste zadržali element u HTML-u, ali je sakrivali za prikaz, pretvorili biste se u CSS.

Dva najčešća načina sakrivanja elementa koji se nalazi u HTML-u bi bila korištenje CSS osobina za "prikaz" ili "vidljivost". Na prvi pogled, ova dva osobina možda izgledaju u velikoj mjeri istu stvar, ali svaki od njih ima različite razlike koje trebate biti svjesni. Hajde da pogledamo razlike između prikaza: nijedan i vidljivost: skriveni.

Vidljivost

Korišćenje CSS svojstva / vrednosti para vidljivosti: skriveno sakriva element iz pregledača. međutim, taj skriveni element i dalje zauzima prostor u izgledu. Kao da ste osnovno učinili element nevidljivim, ali on i dalje ostaje na mestu i zauzima prostor koji bi se pokupio ako je ostao sam.

Ako stavite DIV na svoju stranicu i koristite CSS da biste mu dali dimenzije za preuzimanje 100x100 piksela, vidljivost: skrivena svojina će učiniti da se DIV ne prikazuje na ekranu, ali tekst koji sledi će se ponašati kao da je još uvijek tamo, poštujući to Razmak 100x100.

Iskreno, imovina vidljivosti nije nešto što smo često koristili, a svakako ne sami. Ako takođe koristimo i druge CSS osobine kao što je pozicioniranje kako bi se postigao izgled koji smo želeli za određeni element, mogli bismo da iskoristimo vidljivost da sakrivamo tu stavku na početku, samo da je "okrenemo" ponovo na lebdeću. To je jedna moguća upotreba ove imovine, ali opet, to se ne odnosi na bilo koju frekvenciju.

Ekran

Za razliku od svojstva vidljivosti, koja ostavlja element u normalnom toku dokumenta, prikazuje: nijedan ne uklanja element potpuno iz dokumenta. Ne zauzima nikakav prostor, iako je HTML za njega još uvijek u izvornom kodu. To je zato što je zaista uklonjeno iz toka dokumenta. Za sve namjere i namjene, stavka je nestala. To može biti dobra stvar ili loša stvar, zavisno od toga šta su vaše namjere. Takođe može biti štetan za vašu stranicu ako zloupotrebite ovu nekretninu!

Za testiranje stranice često koristimo "display: none". Ako nam treba neko područje za "odlazak" nekoliko trenutaka, kako bismo mogli testirati druge dijelove stranice, možemo koristiti ekran: nema za to. Međutim, stvar koju treba zapamtiti je da se element vraća na stranicu prije stvarnog lansiranja tog sajta. To je zbog toga što neku stavku koja je uklonjena iz toka dokumenta u ovom postupku ne vide pretraživači ili čitači ekrana, iako ona može ostati u HTML oznakama. U prošlosti, ova metoda je korišćena kao metoda crno-šešira kako bi pokušala utjecati na rang liste pretraživača, tako da se stavke koje nisu prikazane mogle predstavljati crvenom zastavom za Google da razmotri zašto se taj pristup koristi.

Jedan od načina na koji nađemo prikaz: nijedan nije korisan i gdje ga koristimo na živim, proizvodnim web stranicama, je kada izgradimo odgovarajuću stranicu koja može imati elemente koji su dostupni za jednu veličinu ekrana, ali ne i za druge. Možete koristiti ekran: nema da sakrije taj element i kasnije ga ponovo uključite sa medijskim upiti . Ovo je prihvatljiva upotreba displeja: nema, jer ne pokušavate da sakrijete bilo čega zbog neobičnih razloga, ali imate legitimnu potrebu za to.

Originalni članak Jennifer Krynin. Uredio Jeremy Girard 17.3.17