Display None - što je to? Svojstva i uporaba

Možda postoje slučajevi kada radite na razvoju web stranica na kojima morate sakriti određena područja ili elemente iz nekog razloga. Možete jednostavno izbrisati te elemente u HTML oznaci. No, postoje slučajevi kada je potrebno da ostanu u kodu, ali se iz nekog razloga ne prikazuju u prozoru preglednika. Da biste zadržali element u HTML-u, ali ga u isto vrijeme učinili nevidljivim, trebali biste se pozvati na sredstva CSS-a.

Kako sakriti elemente pomoću CSS-a

Postoje dva uobičajena načina za sakrivanje elementa koji je u HTML kodu. Jedan od njih je korištenje svojstava prikaza ili vidljivosti. Na prvi pogled ova dva svojstva mogu izgledati isto, ali svaki od njih ima svoje osobine, koje bi trebali biti svjesni. Pogledajmo pobliže razlike između vidljivosti: skrivene i prikazane: none.

Svojstvo vidljivosti

Prva opcija skriva element iz preglednika, ali taj skriveni dio koda još uvijek zauzima prostor na web stranici. Drugim riječima, čini element nevidljivim, ali i dalje ostaje na mjestu i zauzima prostor koji će zauzeti da je vidljiv. Ako stavite oznaku DIV na stranicu i koristite CSS za postavljanje njene veličine, vidljivost: skrivena svojstva učinit će blok ne prikazati u prozoru preglednika, ali će se tekst nakon njega ponašati kao da je blok još uvijek prisutan.

To je zato što element ostaje u potoku. Svojstvo vidljivosti koristi se vrlo rijetko i obično zajedno s drugim postavkama. Ako koristite i druge CSS konfiguracije, kao što je pozicioniranje, najprije ga možete upotrijebiti za skrivanje elementa, ali tako da ga možete vratiti na mjesto kada prelazite pokazivačem. To je jedna od mogućnosti korištenja svojstva vidljivosti, ali joj se ne pristupa prečesto.

Prikaz: nema svojstva i njegova uporaba u CSS-u

Za razliku od svojstva vidljivosti, koja ostavlja element u streamu, druga CSS svojstva, koja se koristi za skrivanje elemenata, omogućuje vam da sakrijete blok kao da nije tamo. Za div, display none ne radi kao da potpuno uklanja ovaj element iz dokumenta. Ne zauzima nikakav prostor, iako i dalje ostaje u HTML izvornom kodu. Stavka se neće pojaviti na vašoj web-lokaciji i neće biti vidljivih dokaza o njezinu postojanju. S obzirom da će se okolni elementi smatrati praznim prostorom i kretati se, ovisno o vlastitim svojstvima. To je zato što ispada iz potoka. Ova se nekretnina može uspješno primijeniti ili ne, ovisno o namjerama proizvođača. U svakom slučaju, ne bi ih trebalo zlostavljati.

Korištenje svojstva tijekom izgleda

Dizajneri izgleda često koriste prikaz: none property prilikom testiranja stranice. To se obično događa ako trebate neko vrijeme sakriti područje tako da možete testirati druga područja na stranici. U tom slučaju koristite zaslon: none. Važno je zapamtiti da se stavka mora vratiti na stranicu prije nego što je stranica zapravo pokrenuta. Stvar je u tome da element koji je uklonjen iz toka pomoću ove metode postaje nevidljiv tražilicama i čitačima zaslona, ​​čak i ako i dalje ostane u HTML oznaci.

U prošlosti je ova metoda korištena kako bi se utjecalo na rangiranje tražilica. No sada se stavke koje nisu prikazane mogu označiti crvenom Google zastavom da bi se vidjelo zašto se koristi ovaj pristup. Jedan od načina korištenja zaslona: nitko s dobrobiti stvara web-lokacije s prilagodljivim dizajnom. Kada pišete kod za takve web stranice, često je potrebno stvoriti elemente koji su dostupni samo za prikaz u određenoj razlučivosti, ali skriveni za druge opcije. Možete koristiti display: none u CSS-u da biste sakrili ovaj element, a zatim ga ponovno uključite kasnije. To je prihvatljivo korištenje ove imovine, jer je nemoguće posumnjati na slovoslagača u pokušaju da se sakrije nešto zbog utjecaja na tražilice.

JavaScript mapiranje svojstava

Svojstvo prikaza je važno svojstvo CSS-a, ali se uobičajeno koristi u JavaScriptu za skrivanje i prikazivanje elemenata bez njihovog brisanja i ponovnog stvaranja. Da biste prebacili prikaz elementa div, možete koristiti ne samo CSS, već i JavaScript. U ovom se slučaju koristi sljedeći kôd:

, Druga mogućnost je korištenje knjižnice jQuery. Kao i CSS display: none property za div, jQuery "hide () metoda također skriva odabrane elemente. Skriveni dijelovi koda uopće neće biti prikazani.

Čitači zaslona i vidljivost stavke

Čitači zaslona, ​​takozvani "čitatelji", mijenjaju svoje ponašanje kada u sadržaju pronađu element koji je skriven s prikazom: none. Skriveni sadržaj, u pravilu, ne obavještava čitatelje o sebi, ako u njemu nisu registrirani atributi oznaka. Postoje situacije u kojima programeri možda žele vizualno sakriti sadržaj, ali se prikazuju korisnicima čitača zaslona. Na primjer, dizajn može zahtijevati dvosmislene izraze, kao što je "više", gdje je kontekst vizualno očigledan, ali se može izgubiti za korisnike čitača zaslona. Da biste to zaobišli, programer može učiniti sljedeće: napisati CSS pravilo s prikaznim blokom ili bez njega i dodati oznaku s opisom ovog elementa.

Problemi s čitačima zaslona

Problem je u skrivanju sadržaja sa zaslona: nitko također ne skriva sadržaj od korisnika koji čitaju sa zaslona. Da biste to zaobišli, programeri su počeli pozicionirati sadržaj koristeći nekoliko metoda, na primjer, apsolutno pozicioniranje s navedenom širinom i visinom elementa i preljevom: skriveno vlasništvo. Kada se u tom slučaju koristi oznaka s opisom, kontekstualne informacije se ne prikazuju na zaslonu, nego se najavljuju korisnicima čitača zaslona. Ali ako provjerite dostupnost web-lokacija, najčešće se pojavljuju elementi koji su pogrešno skriveni pomoću zaslona: none property. Najčešći primjeri su veze dizajnirane za pomoć korisnicima tipkovnice i čitača zaslona. Ironija je u tome što ove dobre namjere nestaju i poveznice čine beskorisnim zbog korištenja prikaza: ništa.

Osnovna pravila za rješavanje problema pristupačnosti

Zbog problema s tražilicama i raznih opcija za percepciju informacija, trebate biti oprezni kada koristite zaslon: none. To ne znači da ga uopće ne smijete koristiti. Ovo svojstvo ima mnoge kvalitete koje ga čine gotovo neophodnim za neke operacije.

Evo nekoliko pravila koja će vam pomoći odrediti kada i kako vizualno sakriti elemente:

1. Ako trebate vizualno sakriti sadržaj, ali ga ostaviti dostupnim za čitateljske programe, nemojte ga koristiti za prikaz teksta: none.
2. Ako sadržaj koji skrivate može biti koristan samo korisnicima koji koriste čitače zaslona, ​​razmislite o tome želite li ga sakriti. Ako se i dalje odlučite sakriti, provjerite da li je vidljiva prilikom fokusiranja.
3. Ako želite privremeno sakriti nešto i prikazati ga kao rezultat interakcije s korisnikom, prikaz: ništa ne može biti upravo ono što trebate. Važan čimbenik u ovom slučaju je da, budući da ćete umjesto toga koristiti JavaScript kako biste sadržaj učinili vidljivim promjenom vrijednosti svojstva prikaza, morate imati na umu da ćete ga morati sakriti i za korisnike koji nemaju JS.

Pri radu s vizualizacijom sadržaja sve se svodi na spoznaju da prikaz: nitko ne skriva sadržaj od svih koji koriste CSS za preglednik.