Pri práci na vývoji webových stránok sa môžu vyskytnúť prípady, kedy musíte z istého dôvodu "skryť" konkrétne oblasti položiek. Môžete samozrejme jednoducho odstrániť položky z otázok z značky HTML , ale čo, ak chcete, aby zostali v kóde, ale nezobrazia sa na obrazovke prehliadača z akéhokoľvek dôvodu (a budeme skúmať dôvody urobte to krátko). Ak chcete zachovať prvok vo vašom HTML, ale skryť ho na zobrazenie, obrátite sa na CSS.
Dve najbežnejšie spôsoby, ako skryť prvok, ktorý je v HTML, budú používať vlastnosti CSS pre "zobrazenie" alebo "viditeľnosť". Na prvý pohľad sa zdá, že tieto dve vlastnosti robia prevažne to isté, ale každý z nich má výrazné rozdiely, ktoré by ste si mali byť vedomí. Poďme sa pozrieť na rozdiely medzi zobrazením: žiadne a viditeľnosť: skryté.
viditeľnosť
Použitie dvojice viditeľnosti: skrytá vlastnosť / hodnota CSS skryje prvok z prehliadača. že skrytý prvok stále zaberá priestor v rozložení. Je to, akoby ste v podstate neviditeľný prvok, ale stále zostáva na mieste a zaberie priestor, ktorý by si vzal, keby zostal sám.
Ak umiestnite na svoju stránku DIV a použijete CSS na to, aby ste dostali rozmer 100x100 pixelov, skrytá vlastnosť viditeľnosti: Skrytá vlastnosť spôsobí, že sa DIV nezobrazí na obrazovke, ale text, ktorý nasleduje, sa bude správať tak, akoby tam stále existoval, rešpektujúc to Rozstup 100x100.
Úprimne povedané, vlastnosť viditeľnosti nie je niečo, čo sme používali veľmi často a samozrejme nie sme sami. Ak používame aj iné vlastnosti služby CSS, ako je umiestnenie, aby sme dosiahli rozloženie, ktoré sme chceli pre určitý prvok, mohli by sme potom použiť viditeľnosť, aby sme túto položku spočiatku skryli, len aby sme ju "zase zapli". To je jedno možné využitie tejto vlastnosti, ale znova nie je to niečo, na čo sa obraciame s akoukoľvek frekvenciou.
zobraziť
Na rozdiel od vlastností viditeľnosti, ktorý ponecháva prvok v normálnom toku dokumentov, zobrazí: žiadny úplne neodstráni prvok z dokumentu. Netýka sa žiadneho miesta, hoci HTML je stále v zdrojovom kóde. Je to preto, že je skutočne odstránené z toku dokumentov. Pre všetky zámery a účely je položka preč. Môže to byť dobrá vec alebo zlá vec, v závislosti od toho, aké sú vaše zámery. Môže to tiež poškodiť vašu stránku, ak zneužijete tento majetok!
Pri testovaní stránky často používame "zobrazenie: žiadny". Ak budeme potrebovať určitú oblasť, aby sme "trochu odišli", aby sme mohli otestovať ďalšie oblasti stránky, môžeme použiť zobrazenie: žiadna z nich. Treba však pamätať na to, že prvok by sa mal vrátiť späť na stránku pred samotným spustením tejto stránky. Je to preto, že položka, ktorá je odstránená z toku dokumentov v tejto metóde, nie je zobrazená vyhľadávacími strojmi ani čítačmi obrazovky, hoci môže zostať v značke HTML. V minulosti bola táto metóda použitá ako čierna klobúk, aby sa pokúsili ovplyvniť poradie vyhľadávačov, takže položky, ktoré nie sú zobrazené, by mohli byť pre spoločnosť Google červenou vlajkou, aby preskúmali, prečo sa tento prístup používa.
Jedným zo spôsobov, ako nájdeme zobrazenie: žiadna z nich nie je užitočná a kde ju používame na živých produkčných webových stránkach, je to, keď budeme vytvárať citlivá lokalita, ktorá môže mať prvky, ktoré sú k dispozícii pre jednu veľkosť zobrazenia, ale nie pre iné. Ak chcete skrytý prvok skryť a potom ho znova zapnúť pomocou mediálnych dopytov, môžete použiť displej: žiadny. Toto je prijateľné použitie displeja: žiadny, pretože sa nesnažíte skryť nič z hanebných dôvodov, ale máte oprávnenú potrebu tak urobiť.
Originálny článok od Jennifer Krynin. Editoval Jeremy Girard 3. 3. 17