Razlika med »prikazom: nič« in »vidljivost: skrita« v CSS

Med delom na razvoju spletnih strani lahko pride do krat, da morate zaradi enega ali drugega razloga "skriti" določena območja elementov. Seveda preprosto odstranite elemente v vprašanjih iz oznake HTML , vendar, če želite, da ostanejo v kodi, ne pa tudi na zaslonu brskalnika iz katerega koli razloga (in bomo preučili razloge za to storite kmalu). Če želite ohraniti element v vašem HTML-ju, vendar ga skriti za prikaz, bi se obrnili na CSS.

Dva najpogostejša načina za skrivanje elementa, ki je v HTML-ju, bi bila uporaba lastnosti CSS za "prikaz" ali "vidljivost". Na prvi pogled se zdi, da ti dve lastnosti večinoma ista stvar, vendar imata vsaka različne razlike, o katerih bi se morali zavedati. Oglejmo si razliko med prikazom: nič in vidljivost: skrita.

Vidljivost

Uporaba lastnosti CSS lastnosti / vrednosti vidnosti: skrita skriva element iz brskalnika. vendar ta skriti element še vedno zajema prostor v postavitvi. To je, kot da ste v bistvu naredili element neviden, vendar še vedno ostane na mestu in zavzame prostor, ki bi ga vzel, če bi ga pustili sami.

Če postavite DIV na svojo stran in uporabite CSS, če želite, da dimenzije sprejmejo 100x100 slikovnih pik, bo vidljivost: skrita lastnost onemogočila, da se DIV ne prikaže na zaslonu, vendar bo besedilo, ki sledi temu, delovalo tako, kot je še vedno tam, Razmik 100x100.

Iskreno, lastnost prepoznavnosti ni nekaj, kar smo uporabili zelo pogosto, in gotovo ni sam. Če uporabljamo tudi druge CSS lastnosti, kot so pozicioniranje, da bi dosegli postavitev, ki smo si jo želeli za določen element, bi lahko nato uporabili vidnost, da najprej skrijemo to postavko, le da jo "zavrtimo" naprej na lebdenje. To je ena možna uporaba te lastnosti, vendar spet ni nekaj, s čimer se obračamo s poljubno frekvenco.

Zaslon

Za razliko od lastnosti vidnosti, ki pušča element v normalnem toku dokumenta, se prikaže: noben element popolnoma ne odstrani iz dokumenta. Ne zajema prostora, čeprav je HTML za to še vedno v izvorni kodi. To je zato, ker je dejansko odstranjeno iz toka dokumenta. Za vse namere in namene je predmet izginil. To je lahko dobra stvar ali slaba stvar, odvisno od vaših namenov. Prav tako lahko škoduje vaši strani, če napačno uporabite to lastnost!

Pri testiranju strani pogosto uporabljamo »display: none«. Če potrebujemo območje, ki bo nekaj časa "izginilo", da bomo lahko preizkusili druga področja strani, lahko uporabimo prikaz: nič za to. Stvari, ki jih je treba zapomniti, je, da je treba element vrniti nazaj na stran pred dejanskim zagonom te strani. To je zato, ker element, ki je odstranjen iz toka dokumenta v tej metodi, ne vidijo iskalniki ali bralniki zaslona, ​​čeprav lahko ostane v oznaki HTML. V preteklosti je bila ta metoda uporabljena kot metoda črnega klobuka, da bi lahko vplivali na uvrstitev v iskalnik, zato so lahko postavke, ki niso prikazane, rdeča zastava, da bi Google preučil, zakaj se ta pristop uporablja.

Eden od načinov, na katere najdemo prikaz: nič, ki bi bil uporaben in če ga uporabljamo na živih, produkcijskih spletnih mestih, je, ko gradimo odzivno spletno mesto, ki ima lahko elemente, ki so na voljo za eno velikost zaslona, ​​ne pa tudi za druge. Za prikaz tega elementa lahko uporabite prikaz: nič, nato pa ga kasneje ponovno vklopite z medijskimi poizvedbami . To je sprejemljiva uporaba zaslona: nobena, ker ne skušaš ničesar skriti zaradi brezobzirnih razlogov, vendar ima to legitimno potrebo.

Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 3/3/17