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).
V žádném prohlížeči, který vlastnost visibility zná, jsem s ní neměl problémy. Samozřejmě kromě Netscape 4.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | ||
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | částečně | skryje pouze prvky s position: relative nebo absolute |
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>
Display = způsob zobrazení prvku (též nezobrazení)
o tvorbě, údržbě a zlepšování internetových stránek