Ang kalainan tali sa "display: wala" ug "visibility: gitago" sa CSS

Mahimong adunay mga panahon, samtang magtrabaho ka sa pagpalambo sa mga web page, nga kinahanglan nimo nga "tagoan" ang mga piho nga mga butang sa mga butang alang sa usa ka hinungdan o sa lain. Siyempre, mahimo nimong kuhaon ang (mga) mga butang sa mga pangutana gikan sa markup sa HTML , apan unsa kung gusto nimo nga magpabilin kini sa code, apan dili ipakita sa screen sa browser sa bisan unsang rason (ug atong ribyuhon ang mga hinungdan sa buhata kini sa dili madugay). Aron mahuptan ang usa ka elemento sa imong HTML, apan itago kini aron ipakita, mahimo ka sa CSS.

Ang duha ka labing komon nga mga paagi sa pagtago sa elemento nga anaa sa HTML mao ang paggamit sa CSS properties alang sa "display" o "visibility". Sa una nga pagtan-aw, kini nga duha nga mga kabtangan ingon og kadaghanan sa sama nga butang, apan ang matag usa adunay managlahi nga mga kalainan nga kinahanglan nimong mahibaloan. Atong tan-awon ang mga kalainan tali sa display: wala ug visibility: gitago.

Pagtan-aw

Gamit ang CSS property / value pair sa visibility: gitago nagtago sa usa ka elemento gikan sa browser. Apan, kanang natago nga elemento nagkinahanglan gihapon og luna sa layout. Sama kini sa imong gihimo sa elemento nga dili makita, apan nagpabilin gihapon kini sa lugar ug gikuha ang luna nga gikuha niini kung gibiyaan kini nga mag-inusara.

Kon ibutang nimo ang DIV sa imong panid ug gamit ang CSS aron mahatagan kini og mga dimensyon sa pagkuha sa 100x100 pixels, ang visibility: tinago nga kabtangan ang maghimo sa DIV nga dili ipakita sa screen, apan ang teksto nga mosunod niini molihok nga sama kini sa gihapon, mahitungod sa 100x100 spacing.

Sa tinuud, ang pagtan-aw sa kabtangan dili usa ka butang nga kanunay natong gigamit, ug sa pagkatinuod wala sa iyang kaugalingon. Kung gigamit usab nato ang uban pang mga propyedad sa CSS sama sa pagpahiluna aron makab-ot ang plano nga gusto nato alang sa usa ka elemento, mahimo nga gamiton nato ang visibility aron itago ang maong butang sa sinugdanan, aron lamang "ibalik" kini sa hover. Kana usa ka posible nga paggamit niini nga kabtangan, apan pag-usab, kini dili usa ka butang nga atong gibalik sa bisan unsang frequency.

Ipakita

Dili sama sa makita nga kabtangan, nga nagbilin sa usa ka elemento sa normal nga agianan sa dokumento, nagpakita: walay usa nga nagwagtang sa elemento sa hingpit gikan sa dokumento. Kini wala magkuha sa bisan unsang luna, bisan pa ang HTML alang niini anaa gihapon sa source code. Kini tungod kay kini, sa pagkatinuod, gikuha gikan sa dokumento nga dagan. Alang sa tanan nga katuyoan ug katuyoan, wala nay butang. Mahimo kini nga usa ka maayo nga butang o usa ka dili maayo nga butang, depende kung unsa ang imong mga intensyon. Mahimo usab kini nga makadaot sa imong panid kon dili nimo gamiton kini nga propidad!

Kanunay namong gigamit ang "display: wala" sa pagsulay sa usa ka panid. Kung gikinahanglan nato ang usa ka lugar nga "magpalayo" sa usa ka diyutay nga panahon aron nga masulayan nato ang ubang mga bahin sa panid, mahimo natong gamiton ang display: walay alang niana. Ang butang nga hinumduman, bisan pa, mao nga ang elemento kinahanglan ibalik balik sa pahina sa dili pa ang aktwal nga paglunsad sa maong site. Kini tungod kay ang usa ka butang nga gikuha gikan sa agianan sa dokumento sa niini nga pamaagi wala makita sa mga search engine o screen reader, bisan pa kini magpabilin sa markup sa HTML. Sa nangagi, kini nga pamaagi gigamit ingon nga usa ka pamaagi sa black-hat sa pagsulay sa pag-impluwensya sa search engine rankings, busa ang mga butang nga wala gipakita mahimo nga usa ka red flag alang sa Google aron tan-awon kung nganong gigamit kana nga paagi.

Ang usa ka paagi nga atong makita makita: wala'y mapuslanon, ug diin gigamit nato kini sa live, mga website sa produksyon, mao ang panahon nga kita nagtukod og usa ka responsive nga site nga adunay mga elemento nga magamit alang sa usa ka gidak-on sa display apan dili alang sa uban. Mahimo nimong gamiton ang display: wala'y itago kana nga elemento ug dayon ibalik kini sa mga pangutana sa media sa ulahi. Kini usa ka madawat nga paggamit sa display: wala, tungod kay wala ka naningkamot sa pagtago sa bisan unsa alang sa mga kasaypanan, apan adunay lehitimong panginahanglan nga buhaton kini.

Ang orihinal nga artikulo ni Jennifer Krynin. Gipamod ni Jeremy Girard sa 3/3/17