visibilityVlastnosť CSS má dve rôzne funkcie. Skryje riadky a stĺpce tabuľky a skryje tiež prvok bez zmeny rozloženia.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitymá štyri platné hodnoty: visible, hidden, collapsea inherit. Každý z nich prejdeme, aby sme sa dozvedeli viac.
viditeľné
Rovnako, ako to znie, visiblezviditeľňuje veci. Predvolene nie je nič skryté, takže táto hodnota nerobí nič, pokiaľ nemáte nastavený hiddentento alebo nadradený prvok tohto prvku.
skryté
hidden Hodnota skrýva veci. Toto je iné ako použitie display: none, pretože hidden prvky sa skryjú iba vizuálne. Prvok je stále tam a stále zaberá miesto na stránke, ale už ho nevidíte (niečo ako zmena nepriehľadnosti na 0). Je zaujímavé, že táto vlastnosť sa dedí štandardne. To znamená, že na rozdiel od vlastností display alebo opacitymôžete vytvoriť prvok hiddena stále mať jedno z jeho detí visible, napríklad takto:
Všimnite si, že hoci je skrytý, nadradený prvok nespúšťa :hover.
zrútiť sa
Tento ovplyvňuje iba riadky tabuľky ( ), skupiny riadkov (ako ), stĺpce ( ), skupiny stĺpcov ( ) alebo prvky, ktoré sú týmto spôsobom vytvorené display).
Na rozdiel od hiddentejto hodnoty táto hodnota skryje čiastkový prvok tabuľky bez toho, aby opustila miesto, kde bola. Ak sa používa inde ako na podpriečinku tabuľky, správa sa ako visibility: hidden.
Existuje toľko vtipov, že je ťažké vedieť, kde začať. Rovnako ako predjedlo:
- Chrome / Safari zbalí riadok, ale miesto, ktoré zaberalo, zostane. A ak by bunky tabuľky vo vnútri mali ohraničenie, zrútilo by sa to do jedného ohraničenia pozdĺž horného okraja.
- Chrome / Safari nezbalí stĺpec alebo skupinu stĺpcov.
- Safari zbalí bunku tabuľky (nesprávne), ale Chrome nebude (správne).
- Ak je v ktoromkoľvek prehľadávači bunka v stĺpci, ktorý je zbalený (bez ohľadu na to, či sa skutočne zbalí), text v tejto bunke sa nezobrazí.
- Opera (pre WebKit) zbalí kecy zo všetkého, okrem bunky tabuľky (čo je správne).
Je toho viac, ale v zásade: toto nikdy nepoužívajte.
dediť
Predvolená hodnota. Toto jednoducho spôsobí, že element zdedí hodnotu svojho rodiča.
Flexbox
visibility: collapse; sa používa aj vo Flexboxe a je definovanejšia.
Podpora prehľadávača
Základy, neberúc do úvahy všetky problémy so zrútením:
| akýkoľvek | akýkoľvek | akýkoľvek | 4+ | 4+ | akýkoľvek | akýkoľvek |
IE 7- nepodporuje collapsealebo inherit.