A weboldalak fejlesztésénél időnként lehet, hogy bizonyos okok miatt "el kell rejteni" az egyes elemek területét. Természetesen egyszerűen eltávolíthatja a kérdéses elemeket a HTML- jelölésből, de mi van, ha azt szeretné, hogy maradjanak a kódban, de semmilyen okból ne jelenjenek meg a böngésző képernyőjén (és megvizsgáljuk az okokat csináld ezt rövidesen). Ha meg szeretné őrizni egy elemet a HTML-ben, de elrejtheti a megjelenítéshez, a CSS-hez fordulna.
A HTML-ben található elem elrejtésének két leggyakoribb módja a CSS-tulajdonságok használata a "megjelenítés" vagy a "láthatóság" számára. Első pillantásra ez a két tulajdonság úgy tűnik, hogy nagyjából ugyanazt a dolgot csinálja, de mindegyiknek megkülönböztetett különbségei vannak, amiket tudnia kell. Vessünk egy pillantást a különbség a kijelző: none és a láthatóság: rejtett.
Láthatóság
A CSS tulajdonság / érték párja láthatósága: rejtett elrejti az elemet a böngészőből. azonban a rejtett elem még mindig helyet foglal el az elrendezésben. Olyan, mintha alapvetően az elemet láthatatlanná tenné, de még mindig a helyén van, és felveszi azt a helyet, amelyet felvetett volna, ha egyedül maradna.
Ha elhelyez egy DIV-et az oldaladon, és a CSS használatával megadja a dimenziókat, hogy 100x100 képpontot vegyen fel, a láthatóság: rejtett tulajdonság a DIV nem jelenik meg a képernyőn, de az azt követő szöveg úgy működik, mintha még mindig ott lenne, tiszteletben tartva ezzel 100x100 távolság.
Őszintén szólva, a láthatóság tulajdonsága nem olyan, amit nagyon gyakran használtunk, és természetesen nem önmagában. Ha más CSS tulajdonságokat is használunk, például a pozícionálást, hogy elérjük az elrendezést, amit egy adott elemhez akarunk, akkor láthatósággal használhatjuk az elejét, hogy elrejtsük azt az elemet, csak a "lefordításhoz". Ez a tulajdonság egy lehetséges használata, de ismét ez nem valami, amit bármilyen gyakorisággal fordítunk.
Kijelző
A láthatósági tulajdonsággal ellentétben, amely egy elemet hagy normál dokumentumáramban, megjeleníti: nincs eltávolítva az elemet teljesen a dokumentumból. Nem vesz fel semmilyen helyet, annak ellenére, hogy a HTML még mindig a forráskódban van. Ez azért van, mert valóban eltávolították a dokumentumáramlástól. Minden tételre és célra eltűnt a tétel. Ez lehet jó vagy rossz dolog, attól függően, hogy mi a szándéka. Az oldalára is káros lehet, ha ezt a tulajdonságot visszaél.
Az oldal tesztelése során gyakran "display: none" -ot használunk. Ha egy olyan területre van szükségünk, hogy "elmenjünk" egy kicsit, amíg meg tudjuk tesztelni az oldal egyéb területeit, használhatjuk a megjelenítést: nincs ehhez. Az a dolog azonban, hogy ne feledje, hogy az elemet vissza kell visszaküldeni az oldalra, mielőtt az adott webhelyet ténylegesen elindítanák. Ennek az az oka, hogy egy olyan elemet, amelyet ebben a módszerben eltávolítanak a dokumentumáramlásból, a keresőmotorok vagy a képernyőolvasók nem látják, annak ellenére, hogy a HTML-jelölés továbbra is fennmarad. A múltban ezt a módszert fekete-hatos módszerként alkalmazták, hogy megpróbálja befolyásolni a keresőmotorok rangsorolását, így a nem mutatott elemek piros jelzőt jelenthetnek a Google számára, hogy megvizsgálja, miért használják ezt a megközelítést.
Az egyik módja annak, hogy megtaláltuk a kijelzőt: senki sem hasznos, és ahol élő, termelési webhelyeken használjuk, amikor egy olyan érzékelő webhelyet építünk, amely egy megjelenítési mérethez rendelkezésre áll, de nem mások számára. A Display: none elemet elrejtheti, majd később visszaállíthatja a médiakérdéseket . Ez a megjelenítés elfogadható használata: nincs, mert nem próbálsz elrejteni valamit különös okok miatt, de legitim szükséged van rá.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 3/3/17