Visibility
CSS vlastnost visibility určuje zobrazení nebo vygumování prvku.
| hodnoty | viditelnost prvku |
|---|---|
| visible | normálně viditelný |
| hidden | neviditelný, ale zabere místo |
Normálně jsou všechny prvky viditelné, ale když se nastaví visibility: hidden, tak se prvek může vygumovat. Zůstane po něm prázdné místo. V tom se liší od display: none, protože co má display: none, po tom nezůstane ani to místo.
Visibility je méně náročná na výpočet, než display, proto se často používá v javascriptu pro mizení a zobrazování objektů (namísto náročnějšího display).
Příbuzná vlastost content-visibility se může hodit pro svižnější vykreslování složitější stránky.
Podpora
V žádném prohlížeči, který vlastnost visibility zná, jsem s ní neměl problémy.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | všechny verze | |
| Firefox | všechny verze | |
| Opera, Chrome | všechny verze |
Příklady
Vlastnost visibility se používá téměř výhradně pro účely skriptování. Pokud totiž chci na stránce něco skrýt, téměř vždy je lepší použít display: none. Visibility se hodí jenom v tom případě, kdy je třeba vyhradit pro skrytý prvek místo nebo ho rychle přepočítávat. Změny visibility se počítají rychleji než display, protože neovlivňují zbytek stránky.
Budu mít skrytý text, u něhož chci, aby se při přejetí myší (onmouseover) zviditelnil:
<div style="visibility: hidden" onmouseover="this.style.visibility='visible'">skrytý text</div>
Pokud by po takovém prvku něco následovalo, zůstává to na své pozici a nic neposkakuje.
Další příklad dělá zdánlivě to samé s vlastností display, ale prvek ze stránky úplně zmizí. Nejde mu tedy ani přidělit třeba onmouseover, protože přes zmizelý prvek nejde ani jet myší.
<div style="display: none">skrytý text</div>
Vlastnost content-visibility
K CSS vlastnosti visibility je příbuzná nová vlastnost content-visibility. (Nová protože je zhruba od roku 2020, ale v běžných prohlížečích je plně podporována jen částečně.) Slouží k úspoře výpočetního výkonu během načítání a rolování stránky. Pokud nestavíte extrémně složité stránky s tisíci prvků DOMu, nemusíte se o content-visibility moc zajímat. Hodnoty jsou visible (to je výchozí, nic nedělá), hidden (prvek skryje hodně podobně jako visibility: hidden) a nejzajímavější hodnota auto. Zápis je klasicky content-visibility: auto.
Content-visibility: auto způsobí, že se nějaký prvek nebude vykreslovat, pokud ho uživatel ještě nevidí. To má význam u složitých dlouhých stránek, tkeré ve své spodní, zatím neviděné části vykreslují nějaké složitosti. Složité vykreslování při načítání stránky může příliš zaměstnávat hardvare uživatelova zařízení (zjednodušeně řešeno mu bude mrznout a cukat se), takže se pomocí content-visibility: auto část stránky nechá vykreslit, až když na ni uživatel doroluje. Pokud to chcete používat, dejte content-visibility nějakému prvku dole na stránce. Nikoli celé stránce, to by nemělo efekt.
Dělal jsem si s content-visibility nějaké testy, ale testuje se to blbě, protože když se efekt týká jenom částí, které nejsou vidět, tak je ... jaksi ... nevidím. A nevím, co se s nimi děje. I tak se můžete podívat na můj test vlastnosti content-visibility.
Reklama
