Zobrazit žádný - co to je? Vlastnosti a použití

Mohou existovat případy, kdy pracujete na vývoji webových stránek, kde je třeba z nějakých důvodů skrýt určité oblasti nebo prvky. Jednoduše je můžete odstranit v označení HTML. Existují však případy, kdy je nutné, aby zůstali v kódu, ale z nějakého důvodu se nezobrazí v okně prohlížeče. Chcete-li zachovat prvek ve vašem HTML, ale současně je neviditelný, měli byste se obrátit na prostředky CSS.

Jak skrýt prvky pomocí CSS

Existují dva běžné způsoby skrytí prvku, který je v kódu HTML. Jedním z nich je použití vlastností zobrazení nebo viditelnosti. Na první pohled se tyto dvě vlastnosti mohou zdát stejné, ale každá z nich má své vlastní rysy, o kterých byste si měli být vědomi. Podívejme se blíže na rozdíly mezi viditelností: skrytou a displejem: žádná.

Vlastnost viditelnosti

První možnost skrývá prvek z prohlížeče, ale tato skrytá část kódu stále zaberá místo na webové stránce. Jinými slovy, činí tento prvek neviditelným, ale stále zůstává na místě a zabírá prostor, který by obsadil, kdyby byl viditelný. Pokud umístíte značku div na stránku a pomocí CSS nastavíte její velikost, skrytá vlastnost viditelnosti: skryje, aby se blok nezobrazil v okně prohlížeče, ale text po něm se bude chovat, jako kdyby byl blok stále přítomen.

Je to proto, že prvek zůstává v proudu. Vlastnost viditelnosti se používá poměrně zřídka a obvykle spolu s jinými nastaveními. Pokud používáte i jiné konfigurace CSS, například polohování, můžete ji nejprve použít k skrytí prvku, ale k návratu na místo při pohybu kurzorem. Toto je jedno možné využití vlastností viditelnosti, ale není přístupné příliš často.

Displej: žádná vlastnost a její použití v CSS

Na rozdíl od vlastnosti viditelnosti, která ponechává prvek ve streamu, druhá vlastnost CSS, která se používá k skrytí prvků, vám umožňuje skrýt blok, jako kdyby tam nebyl. Pro div, zobrazení žádný nefunguje tak, jako by úplně odstranil tento prvek z dokumentu. Nezachytí žádný prostor, i když stále zůstává ve zdrojovém kódu HTML. Položka se na vašem webu nezobrazí a nebude existovat žádný viditelný důkaz její existence. Vzhledem k tomu, že okolní prvky budou považovány za prázdný prostor a budou se pohybovat v závislosti na vlastních vlastnostech. Je to proto, že vypadne z proudu. Tuto vlastnost lze úspěšně použít nebo ne, v závislosti na záměrech výrobce. V žádném případě by neměly být zneužívány.

Použití vlastností během rozvržení

Návrháři rozvržení často používají displej: žádná vlastnost při testování stránky. Obvykle se to stane, pokud potřebujete určitou oblast skrýt, abyste mohli vyzkoušet jiné oblasti stránky. V takovém případě použijte zobrazení: žádné. Je důležité si uvědomit, že položka musí být vrácena na stránku před vlastním spuštěním stránky. Bodem je, že prvek, který je z tohoto streamu odebrán pomocí této metody, se stává neviditelným pro vyhledávače a čtečky obrazovky, i když zůstane v značce HTML.

V minulosti byla tato metoda používána k tomu, aby se pokusila ovlivnit hodnocení vyhledávačů. Nyní však položky, které nejsou zobrazeny, mohou být označeny červenou vlajkou Google, abyste zjistili, proč se tento přístup používá. Jeden ze způsobů, jak používat zobrazení: žádný s výhodou vytváří webové stránky s citlivým designem. Při psaní kódu pro takové webové stránky je často nutné vytvářet prvky, které jsou k dispozici pro zobrazení pouze v určitém rozlišení, ale skryté pro další možnosti. Můžete použít zobrazení: žádný v CSS pro skrytí tohoto prvku a později jej znovu zapněte. To je přijatelné využití této vlastnosti, protože je nemožné podezření na typografu v pokusu skrýt něco kvůli vlivu na vyhledávače.

Mapování vlastností jazyka JavaScript

Vlastnost zobrazení je důležitou vlastností CSS, ale je také běžně používaná v jazyce JavaScript k skrytí a zobrazení prvků bez jejich mazání a opětovného vytváření. Chcete-li přepnout zobrazení elementu div, můžete použít nejen CSS, ale i JavaScript. V tomto případě se používá následující kód:

. Další možností je použití knihovny jQuery. Stejně jako zobrazení CSS: žádná vlastnost pro div, metoda jQuery "hidden () také skryje vybrané prvky. Skryté části kódu se vůbec nezobrazí.

Čtečky obrazovky a viditelnost položek

Čtecí zařízení obrazovky, tzv. "Čtenáři", mění své chování, když nacházejí v obsahu element, který je skrytý s displejem: žádný. Skrytý obsah zpravidla neinformuje čtenáře o sobě, jestliže nejsou atributy štítku registrovány. Existují situace, kdy vývojáři mohou chtít, aby obsah byl skrytý vizuálně, ale byl zveřejněn uživatelům čtečky obrazovky. Například návrh může vyžadovat nejednoznačné fráze, například "více", kde je kontext vizuálně zřejmý, ale může být ztracen pro uživatele čtečky obrazovky. Abyste to mohli obejít, může vývojář provést následující kroky: Napište pravidlo CSS s blokem zobrazení nebo žádné a přidejte značku s popisem tohoto prvku.

Problémy s čtečkami obrazovky

Problém spočívá v tom, že skrytí obsahu z displeje: nikdo také neukrývá obsah od uživatelů, kteří čte z obrazovky. Abychom to dokázali, vývojáři začali obsah obsahovat několika způsoby, například absolutní polohování s určenou šířkou a výškou prvku a skrytou vlastností přetečení. Při použití značky s popisem v tomto případě se kontextová informace nezobrazí na obrazovce, ale je ohlášena uživateli čtečky. Ale pokud kontrolujete stránky pro přístupnost, nejčastěji existují prvky, které jsou nesprávně skryty pomocí displeje: žádná vlastnost. Mezi nejběžnější příklady patří odkazy určené pro uživatele klávesnic a čteček obrazovky. Ironií je, že tyto dobré úmysly zmizely a odkazy se zbytečně vyčerpaly kvůli použití displeje: žádné.

Základní pravidla pro řešení problémů s dostupností

Vzhledem k problémům s vyhledávači a různým možnostem vnímání informací byste měli být opatrní při používání displeje: žádný. To neznamená, že byste jej vůbec neměli používat. Tato vlastnost má mnoho vlastností, díky nimž je pro některé operace téměř nepostradatelná.

Zde je několik pravidel, která by měla pomoci určit, kdy a jak se skrýt prvky vizuálně:

1. Pokud potřebujete obsah skrýt vizuálně, ale ponechat jej k dispozici pro čtenářské programy, nepoužívejte pro zobrazení textu: žádné.
2. Pokud obsah, který skrýváte, může být užitečný pouze pro uživatele, kteří používají čtečky obrazovky, zvažte, zda chcete skrýt obsah. Pokud se rozhodnete skrýt, ujistěte se, že je při focalizaci viditelná.
3. Chcete-li něco dočasně skrýt a zobrazit jej jako výsledek interakce uživatele, zobrazte: nikdo nemůže být právě to, co potřebujete. Důležitým faktorem v tomto případě je to, že jelikož spíše použijete JavaScript k tomu, aby byl obsah viditelný změnou hodnoty vlastnosti zobrazení, musíte mít na paměti, že pro uživatele, kteří nemají JS, budete muset také skrýt.

Při práci s vizualizací obsahu se vše shoduje s tím, že displej: žádný nezakrývá obsah od každého uživatele, který používá prohlížeč CSS.