visibilityVlastnost CSS má dvě různé funkce. Skryje řádky a sloupce tabulky a skryje také prvek bez změny rozložení.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitymá čtyři platné hodnoty: visible, hidden, collapsea inherit. Každý z nich projdeme, abychom se dozvěděli více.
viditelné
Stejně jako to zní, visiblezviditelňuje věci. Ve výchozím nastavení není nic skryto, takže tato hodnota nedělá nic, pokud jste nenastavili hiddentento nebo nadřazený prvek tohoto prvku.
skrytý
hidden Hodnota skrývá věci. To se liší od použití display: none, protože hidden pouze vizuálně skryje prvky. Prvek je stále tam a stále zabírá místo na stránce, ale už ho nevidíte (něco jako otočení krytí na 0). Je zajímavé, že tato vlastnost ve výchozím nastavení nedědí. To znamená, že na rozdíl od vlastností display nebo opacitymůžete vytvořit prvek hiddena stále mít jedno z jeho dětí visibletakto:
Všimněte si, že když je skrytý, nadřazený prvek nespouští :hover.
kolaps
Toto ovlivňuje pouze řádky tabulky ( ), skupiny řádků (jako ), sloupce ( ), skupiny sloupců ( ) nebo prvky, které jsou tímto způsobem vytvořeny display).
Na rozdíl od hiddentéto hodnoty skryje dílčí prvek tabulky, aniž by opustil prostor, kde byl. Pokud se používá kdekoli, ale na dílčím prvku tabulky, chová se jako visibility: hidden.
Existuje tolik vtípků, že je těžké vědět, kde začít. Stejně jako předkrm:
- Chrome / Safari sbalí řádek, ale místo, které obsadil, zůstane. A pokud buňky tabulky uvnitř měly ohraničení, zhroutí se to do jednoho ohraničení podél horního okraje.
- Chrome / Safari nesbalí sloupec nebo skupinu sloupců.
- Safari sbalí buňku tabulky (špatně), ale Chrome nebude (správně).
- Pokud je v libovolném prohlížeči buňka ve sbaleném sloupci (ať se skutečně sbalí nebo ne), text v této buňce se nezobrazí.
- Opera (před WebKit) sbalí kecy ze všeho, kromě buňky tabulky (což je správné).
Je toho víc, ale v zásadě: nikdy to nepoužívejte.
zdědit
Výchozí hodnota. To jednoduše způsobí, že prvek zdědí hodnotu svého rodiče.
Flexbox
visibility: collapse; se používá také ve Flexboxu a přesněji definované.
Podpora prohlížeče
Základní informace, bez ohledu na všechny problémy s kolapsem:
| Žádný | Žádný | Žádný | 4+ | 4+ | Žádný | Žádný |
IE 7- nepodporuje collapsenebo inherit.