Pagkakaiba Sa pagitan ng "display: none" at "visibility: hidden" sa CSS

Maaaring may mga oras, habang nagtatrabaho ka sa pagpapaunlad ng mga web page, na kailangan mong "itago" ang mga partikular na lugar ng mga item para sa isang kadahilanan o iba pa. Maaari mong, siyempre, alisin lamang ang (mga) item sa mga tanong mula sa markup ng HTML , ngunit kung ano kung nais mong manatili sila sa code, ngunit hindi ipapakita sa screen ng browser para sa anumang dahilan (at susuriin namin ang mga dahilan sa gawin ito sa ilang sandali). Upang mapanatili ang isang elemento sa iyong HTML, ngunit itago ito para sa display, nais mong lumipat sa CSS.

Ang dalawang pinaka-karaniwang paraan upang itago ang isang sangkap na nasa HTML ay gumagamit ng mga katangian ng CSS para sa "display" o "visibility". Sa unang sulyap, ang dalawang pag-aari na ito ay maaaring mukhang katulad ng isang bagay, ngunit ang bawat isa ay may magkakaibang pagkakaiba na dapat mong malaman. Tingnan natin ang mga pagkakaiba sa pagitan ng display: none at visibility: nakatago.

Visibility

Gamit ang pagpapakita ng ari-arian ng CSS / halaga ng visibility: nakatago na nakatago ang isang elemento mula sa browser. gayunpaman, ang nakatagong sangkap ay tumatagal pa rin ng espasyo sa layout. Tulad ng karaniwang ginawa mo ang elementong hindi nakikita, ngunit nananatili pa rin ito sa lugar at tumatagal ng espasyo na kinuha nito kung ito ay naiwang nag-iisa.

Kung maglalagay ka ng DIV sa iyong pahina at gumamit ng CSS upang mabigyan ito ng mga dimensyon na kukuha ng 100x100 pixels, ang kakikitaan: ang nakatagong property ay gagawin ang DIV ay hindi ipapakita sa screen, ngunit ang tekstong sumusunod na ito ay kumikilos tulad ng ito ay naroroon pa, tungkol sa 100x100 spacing.

Sa totoo lang, ang visibility property ay hindi isang bagay na madalas naming ginagamit, at tiyak na hindi sa sarili nitong. Kung ginagamit din namin ang iba pang mga katangian ng CSS tulad ng pagpoposisyon upang makamit ang layout na gusto namin para sa isang tiyak na elemento, maaari naming gamitin ang kakayahang makita upang itago ang item na sa simula, tanging upang "i-on" ito pabalik sa hover. Iyon ay isang posibleng paggamit ng ari-arian na ito, ngunit muli, ito ay hindi isang bagay na binuksan namin sa anumang dalas.

Display

Hindi tulad ng ari-arian ng visibility, na nag-iiwan ng isang elemento sa normal na daloy ng dokumento, ipapakita: wala nang ganap na inaalis ang elemento mula sa dokumento. Hindi ito tumatagal ng anumang espasyo, kahit na ang HTML para dito ay nasa source code pa rin. Ito ay sapagkat ito ay, sa katunayan, inalis mula sa daloy ng dokumento. Para sa lahat ng layunin at layunin, nawala ang item. Ito ay maaaring maging isang magandang bagay o isang masamang bagay, depende sa kung ano ang iyong mga intensyon. Maaari rin itong mapinsala sa iyong pahina kung maling magamit mo ang property na ito!

Madalas naming ginagamit ang "display: none" kapag sinusubukan ang isang pahina. Kung kailangan namin ng isang lugar na "umalis" nang ilang sandali upang masubok namin ang ibang mga lugar ng pahina, maaari naming gamitin ang display: wala para sa na. Ang bagay na dapat tandaan, gayunpaman, ay ang elemento ay dapat ibalik pabalik sa pahina bago ang aktwal na paglunsad ng site na iyon. Ito ay dahil ang isang item na tinanggal mula sa daloy ng dokumento sa pamamaraang ito ay hindi nakikita ng mga search engine o mga mambabasa ng screen, kahit na maaaring manatili ito sa markup ng HTML. Sa nakaraan, ang pamamaraan na ito ay ginamit bilang isang paraan ng black-hat upang subukang impluwensiyahan ang ranggo ng search engine, kaya ang mga bagay na hindi ipinapakita ay maaaring isang pulang bandila para sa Google upang tingnan kung bakit ginagamit ang diskarte.

Ang isang paraan na nakikita natin ang pagpapakita: wala nang kapaki-pakinabang, at kung saan ginagamit natin ito sa live, mga website ng produksyon, ay kapag nagtatayo tayo ng tumutugon na site na maaaring mayroong mga sangkap na magagamit para sa isang laki ng display ngunit hindi para sa iba. Maaari mong gamitin ang display: wala upang itago ang sangkap na iyon at pagkatapos ay i-on ito muli gamit ang mga query sa media sa ibang pagkakataon. Ito ay isang katanggap-tanggap na paggamit ng display: wala, dahil hindi mo sinusubukan na itago ang anumang bagay para sa kasuklam-suklam na mga dahilan, ngunit may isang lehitimong pangangailangan na gawin ito.

Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 3/3/17