Diferența dintre "display: none" și "visibility: hidden" în CSS

Pot exista momente, pe măsură ce lucrați la dezvoltarea paginilor web, că trebuie să "ascundeți" anumite domenii ale articolelor pentru un motiv sau altul. S-ar putea să eliminați, desigur, elementele din întrebări din marcajul HTML , dar dacă doriți ca acestea să rămână în cod, dar să nu fie afișate pe ecranul browserului din orice motiv (și vom examina motivele pentru faceți acest lucru în scurt timp). Pentru a păstra un element în codul HTML, dar pentru a îl afișa, ascundeți-l la CSS.

Cele două metode cele mai frecvente de a ascunde un element care este în HTML ar fi utilizarea proprietăților CSS pentru "afișare" sau "vizibilitate". La prima vedere, aceste două proprietăți pot părea să facă în mare parte același lucru, dar fiecare are diferențe distincte pe care ar trebui să le cunoașteți. Să aruncăm o privire la diferențele dintre afișare: nici una și vizibilitatea: ascunsă.

Vizibilitate

Utilizând perechea de proprietăți / valori CSS de vizibilitate: ascuns ascunde un element din browser. cu toate acestea, elementul ascuns încă ocupă spațiu în aspect. Este ca si cum ai facut elementul invizibil, dar ramane in loc si iti ia spatiul pe care ar fi luat-o daca ar fi ramas singur.

Dacă plasați un DIV pe pagina dvs. și utilizați CSS pentru a-i da dimensiunile pentru a obține 100x100 pixeli, proprietatea de vizibilitate: ascunsă va face ca DIV să nu apară pe ecran, dar textul următor va funcționa ca și cum ar fi acolo, Distanța 100x100.

Sincer, proprietatea de vizibilitate nu este ceva ce am folosit foarte frecvent, și cu siguranță nu pe cont propriu. Dacă folosim, de asemenea, alte proprietăți CSS ca poziționarea pentru a obține aspectul pe care l-am dorit pentru un anumit element, am putea folosi apoi vizibilitatea pentru a ascunde acel element inițial, doar pentru a "întoarce" el înapoi pe hover. Aceasta este o posibilă utilizare a acestei proprietăți, dar, din nou, nu este ceva la care ne întoarcem cu o frecvență.

Afişa

Spre deosebire de proprietatea de vizibilitate, care lasă un element în fluxul obișnuit de documente, afișarea: niciuna nu îndepărtează complet elementul din document. Nu ocupă niciun spațiu, chiar dacă codul HTML este încă în codul sursă. Acest lucru se datorează faptului că este într-adevăr eliminat din fluxul de documente. Pentru toate intențiile și scopurile, elementul a dispărut. Acest lucru poate fi un lucru bun sau un lucru rău, în funcție de intențiile dvs. De asemenea, poate fi vătămător pentru pagina dvs. dacă utilizați în mod greșit această proprietate!

Adesea folosim "display: none" la testarea unei pagini. Dacă avem nevoie de o zonă pentru a "pleca" puțin pentru a putea testa alte zone ale paginii, putem folosi afișarea: nici una pentru asta. Lucrul pe care trebuie să-l amintiți este totuși că elementul ar trebui să fie returnat înapoi în pagină înainte de lansarea efectivă a acelui site. Acest lucru se datorează faptului că un element care este eliminat din fluxul de documente în această metodă nu este văzut de motoarele de căutare sau de cititoarele de ecran, deși poate rămâne în marcajul HTML. În trecut, această metodă a fost folosită ca o metodă de pălărie neagră pentru a încerca să influențeze clasamentul motorului de căutare, astfel încât elementele care nu sunt afișate ar putea fi un steag roșu pentru ca Google să analizeze de ce se folosește această abordare.

O modalitate de a găsi afișarea: nici unul care să fie util și unde îl folosim pe site-urile de producție live este atunci când construim un site receptiv care poate avea elemente disponibile pentru o dimensiune a afișajului, dar nu și pentru altele. Puteți utiliza afișarea: nici una pentru a ascunde acel element și apoi pentru ao activa din nou cu interogări media mai târziu. Aceasta este o utilizare acceptabilă a afișării: nici una, pentru că nu încercați să ascundeți nimic din motive nefaste, dar aveți o nevoie legitimă de a face acest lucru.

Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 3/3/17