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).
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>
Následující zápis dělá to samé s vlastností display, ale s prohlížeči to mnohem víc cuká:
<div style="display: none" onmouseover="this.style.display='block'">skrytý text</div>
Reklama
