CSS skirtumas tarp "display: none" ir "visibility: hidden"

Kuriant tinklalapių kūrimą gali būti kartų, kad dėl tam tikrų priežasčių turite "paslėpti" konkrečius objektų sritis. Žinoma, galite paprasčiausiai pašalinti elementus (-ius) klausimuose iš HTML žymėjimo, bet ką daryti, jei norite, kad jie liktų kodu, bet nebūtų rodomi naršyklės ekrane dėl kokios nors priežasties (ir mes peržiūrėsime priežastis, kodėl artimiausiu metu). Norėdami išlaikyti HTML elementą, bet paslėpti jį rodymui, kreipkitės į CSS.

Du dažniausiai paslėpti elementą, esantį HTML, būtų naudoti CSS savybes "rodyti" arba "matomumą". Iš pirmo žvilgsnio šios dvi savybės, atrodo, iš esmės yra vienodos, tačiau kiekviena iš jų turi aiškių skirtumų, kuriuos turėtumėte žinoti. Pažvelkime į rodiklių skirtumus: nėra ir matomumas: paslėpta.

Matomumas

Naudojant CSS nuosavybės / vertės poros matomumą: paslėptas slapta elemento iš naršyklės. Tačiau šis paslėptas elementas vis tiek užima erdvę išdėstyme. Tai panašu, kad jūs iš esmės padarėte elementą nematomą, bet jis vis dar išlieka ir užima erdvę, kurią ji galėtų panaudoti, jei ji liktų atskira.

Jei įdėkite DIV į savo puslapį ir naudojate CSS, kad matmenims būtų suteikta 100x100 pikselių, matomumas: paslėptas turinys padarys, kad DIV nerodomas ekrane, bet tekstas po jo bus toks, koks jis vis dar ten, atsižvelgiant į tai 100x100 tarpai.

Sąžiningai, matomumo savybė nėra tai, ką mes naudojome labai dažnai, ir tikrai ne savarankiškai. Jei mes taip pat naudojame kitas CSS ypatybes, pvz., Pozicionavimą, norėdami pasiekti tam tikro elemento pageidaujamą išdėstymą, tada galėtume naudoti matomumą, kad iš pradžių paslėptumėte elementą, tik "pasukdami" jį atgal. Tai yra vienas galimas šio turto naudojimas, bet vėlgi tai nėra kažkas, į kurį kreipiame, bet kuriuo dažnumu.

Ekranas

Skirtingai nuo matomumo savybės, kuri palieka elementą įprasto dokumento srautui, ekrane rodoma: niekas elementą visiškai pašalina iš dokumento. Neatsižvelgiama į bet kokią erdvę, nors jo HTML vis dar yra šaltinio kode. Taip yra todėl, kad jis iš tikrųjų pašalinamas iš dokumentų srauto. Visais tikslais elementas dingo. Tai gali būti geras dalykas ar blogas dalykas, priklausomai nuo to, kokie yra jūsų ketinimai. Tai taip pat gali pakenkti jūsų puslapiui, jei piktnaudžiaujate šia nuosavybe!

Bandydami puslapį dažnai naudojame "display: none". Jei mums reikia šiek tiek laiko "išeiti", kad galėtume išbandyti kitas puslapio sritis, galime naudoti ekraną: to nepadarė. Tačiau reikia prisiminti, kad elementas turėtų būti grąžintas į puslapį prieš faktinį tos svetainės paleidimą. Taip yra todėl, kad šiame dokumente srautas pašalinamas elementas šiame metode nematomas paieškos sistemose ar ekranų skaitytuvuose, net jei jis gali likti HTML žymėjime. Anksčiau šis metodas buvo naudojamas kaip juodojo skrybėlių metodas, siekiant pabandyti daryti įtaką paieškos sistemos reitingams, taigi elementai, kurie nėra rodomi, galėtų būti raudona vėliava, kad "Google" galėtų sužinoti, kodėl šis požiūris yra naudojamas.

Vienas iš būdų, kaip mes galime rasti ekraną: niekas nebūtų naudingas ir kur mes jį naudosime tiesioginėse gamybos svetainėse, yra tada, kai mes kurdami jautrią svetainę, kurioje gali būti elementų, kurie yra prieinami vienam ekrano dydžiui, bet ne kitiems. Galite naudoti ekraną: nieko, kad paslėptumėte šį elementą, o vėliau vėl įjunkite medijos užklausas . Tai priimtinas ekrano naudojimas: nė vienas, nes nesistengiate paslėpti nieko dėl neigiamų priežasčių, tačiau turi teisėtą poreikį tai padaryti.

Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 3/3/17