Display None - kaj je to? Lastnosti in uporaba

Obstajajo primeri, ko delate na razvoju spletnih strani, kjer morate skriti določena področja ali elemente iz enega ali drugega razloga. Te elemente lahko preprosto izbrišete v oznaki HTML. Vendar pa obstajajo primeri, ko je potrebno, da ostanejo v kodi, vendar ne izpisani v oknu brskalnika, iz neznanega razloga. Da bi ohranili element v HTML-ju, hkrati pa ga naredili nevidnim, se morate sklicevati na sredstva CSS-ja.

Kako skriti elemente s CSS

Obstajata dva pogosta načina za skrivanje elementa, ki je v kodi HTML. Eden od njih je uporaba lastnosti prikaza ali vidnosti. Na prvi pogled se ti dve lastnosti morda zdita enaki, vendar ima vsaka od njih svoje značilnosti, za katere se morate zavedati. Poglejmo podrobneje razlike med vidljivostjo: skrito in prikazano: nobena.

Lastnost vidnosti

Prva možnost skriva element iz brskalnika, vendar ta skriti del kode še vedno zavzema prostor na spletni strani. Z drugimi besedami, naredi element neviden, vendar ostaja na svojem mestu in zavzema prostor, ki bi ga zasedel, če bi bil viden. Če postavite oznako div na stran in uporabite CSS, da nastavite njeno velikost, bo vidnost: skrita lastnost blok pokazala v oknu brskalnika, vendar se bo besedilo po tem obnašalo, kot da je blok še vedno prisoten.

To je zato, ker element ostane v toku. Lastnost vidnosti se uporablja zelo redko in običajno skupaj z vsemi drugimi nastavitvami. Če uporabljate tudi druge konfiguracije CSS, kot je pozicioniranje, jo lahko najprej uporabite za skrivanje elementa, vendar ga lahko vrnete na kraj, ko premikate kazalec. To je ena od možnosti uporabe lastnosti vidnosti, vendar ni prepogosto dostopna.

Prikaz: nobena lastnost in njena uporaba v CSS

Za razliko od lastnosti vidnosti, ki pušča element v toku, druga lastnost CSS, ki se uporablja za skrivanje elementov, vam omogoča, da skrijete blok, kot če ga ni bilo. Za DIV prikaz ne deluje, kot da popolnoma odstrani ta element iz dokumenta. Ne zavzema prostora, čeprav je še vedno v izvorni kodi HTML. Izdelek se ne bo prikazal na vašem spletnem mestu in ne bo vidnih dokazov o njegovem obstoju. Glede na to, da se bodo okoliški elementi obravnavali kot prazen prostor in se premikali, odvisno od njihovih lastnih lastnosti. To je zato, ker pade iz potoka. Ta lastnost se lahko uspešno uporabi ali ne, odvisno od namena izdelovalca. V vsakem primeru se jih ne sme zlorabljati.

Uporaba lastnosti med postavitvijo

Oblikovalci postavitev pogosto uporabljajo prikaz: nobeno lastnost pri preskušanju strani. To se običajno zgodi, če morate nekaj časa skriti območje, tako da lahko preizkusite druga področja strani. V tem primeru uporabite zaslon: nobenega. Pomembno je vedeti, da je treba izdelek vrniti na stran, preden se spletno mesto dejansko zažene. Bistvo je, da element, ki je odstranjen iz toka s to metodo, postane neviden za iskalnike in bralnike zaslonov, tudi če še vedno ostane v oznaki HTML.

V preteklosti je bila ta metoda uporabljena, da bi poskušali vplivati ​​na uvrstitve iskalnikov. Zdaj pa se elementi, ki niso prikazani, lahko označijo z rdečo Google zastavico, da bi ugotovili, zakaj se uporablja ta pristop. Eden od načinov za uporabo zaslona: nobena s koristmi ustvarja spletne strani z odzivnim dizajnom. Pri pisanju kode za takšne spletne strani je pogosto potrebno ustvariti elemente, ki so na voljo samo za prikaz v določeni ločljivosti, vendar skriti za druge možnosti. Za skrivanje tega elementa lahko uporabite display: none v CSS, nato pa ga pozneje ponovno vklopite. To je sprejemljiva uporaba te nepremičnine, ker je nemogoče sumiti, da je tipograf skrit zaradi vpliva na iskalnike.

Preslikava lastnosti JavaScripta

Lastnost prikaza je pomembna lastnost CSS, vendar se pogosto uporablja tudi v JavaScriptu za skrivanje in prikazovanje elementov brez brisanja in ponovnega ustvarjanja. Za preklop prikaza elementa div lahko uporabite ne samo CSS, temveč tudi JavaScript. V tem primeru se uporabi naslednja koda:

. Druga možnost je uporaba knjižnice jQuery. Podobno kot pri prikazu CSS: nobeno lastnost za div, metoda jQuery "hide () tudi skrije izbrane elemente. Skriti deli kode sploh ne bodo prikazani.

Bralniki zaslona in vidljivost elementov

Čitalniki zaslona, ​​tako imenovani »bralci«, spremenijo svoje obnašanje, ko v vsebini najdejo element, ki je skrit z zaslonom: noben. Skrita vsebina praviloma ne obvesti bralcev o sebi, če v njem niso registrirani atributi oznake. V nekaterih primerih lahko razvijalci želijo vizualno skriti vsebino, vendar jo razkrijejo uporabniki bralnika zaslona. Na primer, oblikovanje lahko zahteva dvoumne fraze, kot je »več«, kjer je kontekst vizualno očiten, vendar se lahko izgubi za uporabnike bralnika zaslona. Da bi se izognili temu, lahko razvijalec izvede naslednje: napiši pravilo CSS s prikaznim blokom ali brez njega in doda oznako z opisom tega elementa.

Težave z bralniki zaslona

Težava je v tem, da skrije vsebino iz zaslona: noben ne skrije tudi vsebine uporabnikov, ki berejo z zaslona. Da bi se izognili temu, so razvijalci začeli pozicionirati vsebino z več metodami, na primer absolutno pozicioniranje z določeno širino in višino elementa ter prelivanje: skrita lastnost. Če v tem primeru uporabljate označevanje z opisom, se kontekstualne informacije ne prikažejo na zaslonu, temveč jih napovedujejo uporabniki bralnika zaslona. Če pa preverite mesta za dostopnost, najpogosteje obstajajo elementi, ki so nepravilno skriti z zaslonom: noben lastnost. Najpogostejši primeri so povezave, ki pomagajo uporabnikom tipkovnice in bralnika zaslona. Ironija je v tem, da te dobre namere izginejo in povezave zaradi uporabe prikaza postanejo neuporabne: nobene.

Osnovna pravila za reševanje problemov dostopnosti

Zaradi težav z iskalniki in različnimi možnostmi za zaznavanje informacij morate biti previdni pri uporabi zaslona: nič. To ne pomeni, da je sploh ne smete uporabljati. Ta lastnost ima številne lastnosti, zaradi katerih je skoraj nujna za nekatere operacije.

Tu je nekaj pravil, ki naj bi pomagala določiti, kdaj in kako vizualno skriti elemente:

1. Če želite vsebino skriti vizualno, vendar jo pustite na voljo za bralne programe, ne uporabljajte za prikaz besedila: nobenega.
2. Če je vsebina, ki jo skrivate, lahko uporabna samo za uporabnike, ki uporabljajo bralnike zaslona, ​​razmislite, ali ga želite skriti. Če se še vedno odločite, da ga skrijete, se prepričajte, da postane vidna med fokusiranjem.
3. Če želite nekaj začasno skriti in prikazati kot rezultat interakcije z uporabnikom, prikažite: nobena morda ni samo tisto, kar potrebujete. Pomemben dejavnik v tem primeru je v tem, da morate uporabiti JavaScript, da bo vsebina vidna s spreminjanjem vrednosti lastnosti prikaza, vendar morate vedeti, da jo boste morali skriti tudi za uporabnike, ki nimajo JS.

Pri delu z vizualizacijo vsebine je vse odvisno od spoznanja, da prikaz: noben ne skriva vsebine od vseh, ki uporabljajo brskalnik CSS.