Rozdíl mezi "zobrazením: žádný" a "viditelností: skrytým" v CSS

Při práci na vývoji webových stránek se může stát, že je třeba z nějakého důvodu "skrýt" určité oblasti položek. Samozřejmě můžete jednoduše odebrat položky z dotazů z HTML značky, ale co když chcete, aby zůstaly v kódu, ale z obrazovky prohlížeče se nezobrazí z jakéhokoli důvodu (a my zkontrolujeme důvody to udělat brzy). Chcete-li zachovat prvek ve vašem HTML, ale skrýt ho pro zobrazení, měli byste se obrátit na CSS.

Dvě nejčastější způsoby skrytí prvku, který je v kódu HTML, budou pomocí vlastností CSS pro zobrazení nebo zobrazení. Na první pohled se zdá, že se tyto dvě vlastnosti většinou dělají totéž, ale každý z nich má zřetelné rozdíly, které byste měli vědět. Podívejme se na rozdíly mezi zobrazením: žádné a viditelnost: skryté.

Viditelnost

Pomocí dvojice viditelnosti: skrytá vlastnost / hodnota CSS skrývá prvek z prohlížeče. že tento skrytý prvek stále zaujímá místo v rozvržení. Je to, jako byste element v podstatě neviditelní, ale stále zůstává na místě a zabírá prostor, který by byl vzal, kdyby zůstal sám.

Pokud umístíte DIV na svou stránku a použijete CSS k tomu, abyste získali rozměry 100x100 pixelů, viditelnost: skrytá vlastnost způsobí, že se DIV nezobrazí na obrazovce, ale text, který následuje, se bude chovat jako tam, Rozteč 100x100.

Upřímně řečeno, vlastnost viditelnosti není něco, co jsme používali velmi často, a rozhodně ne samotný. Používáme-li také jiné vlastnosti CSS, jako je umístění, abychom dosáhli rozvržení, které jsme chtěli pro určitý prvek, mohli bychom zpočátku použít tuto viditelnost, abychom tuto položku zpočátku skryli, pouze abychom ji "zapnuli". To je jedno možné využití této vlastnosti, ale znovu, není to něco, na co se obracíme s jakoukoli frekvencí.

Zobrazit

Na rozdíl od vlastností viditelnosti, která ponechává prvek v normálním toku dokumentu, zobrazí: nikdo úplně neodstraní prvek z dokumentu. Nezahrnuje žádný prostor, i když HTML je stále ve zdrojovém kódu. Je to proto, že je skutečně odstraněno z toku dokumentu. Pro všechny záměry a účely je položka pryč. To může být dobrá věc nebo špatná věc, v závislosti na tom, jaké jsou vaše záměry. Může to být také škodlivé pro vaši stránku, pokud zneužijete tuto vlastnost!

Při testování stránky často používáme "zobrazovat: žádný". Pokud potřebujeme nějakou oblast, abychom "trochu odjedli", abychom mohli otestovat další oblasti stránky, můžeme použít displej: žádný pro to. Věc, kterou je třeba pamatovat, je však, že by měl být element vrácen zpět na stránku před samotným spuštěním tohoto webu. Důvodem je, že položka, která je v této metodě odstraněna z toku dokumentů, není vyhledávacími nástroji ani čtečkami obrazovky vidět, přestože může zůstat v značce HTML. V minulosti byla tato metoda používána jako metoda černých klobouků, která se pokusila ovlivnit hodnocení vyhledávačů, takže položky, které nejsou zobrazeny, by mohly být pro společnost Google červenou vlajkou a zkoumaly, proč se tento přístup používá.

Jedním ze způsobů, jak zjistíme, je, že nikdo není užitečný, a kde ho používáme na živých produkčních webových stránkách, je to, když budeme vytvářet citlivé stránky, které mohou obsahovat prvky, které jsou k dispozici pro jednu velikost zobrazení, ale ne pro jiné. Můžete použít displej: žádný, abyste tento prvek skryli a poté jej znovu zapnuli s dotazy médií . Toto je přijatelné použití displeje: žádný, protože se nesnažíte skrýt něco z hanebných důvodů, ale máte oprávněnou potřebu tak učinit.

Původní článek Jennifer Krynin. Editoval Jeremy Girard 3. 3. 17