A visibilityCSS-ben lévő tulajdonságnak két különböző funkciója van. Elrejti a tábla sorait és oszlopait, és egy elemet is elrejt az elrendezés megváltoztatása nélkül.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityNégy érvényes értékek: visible, hidden, collapseés inherit. Mindegyiket átnézzük, hogy többet tudjunk meg.
látható
Ahogy hangzik, visibleláthatóvá teszi a dolgokat. Alapértelmezés szerint semmi nincs elrejtve, ezért ez az érték nem csinál semmit, hacsak nem hiddenezt vagy ennek az elemnek a szülőjét állította be.
rejtett
Az hidden érték elrejti a dolgokat. Ez más, mint a használata display: none, mert hidden csak vizuálisan rejti el az elemeket. Az elem még mindig ott van, és még mindig helyet foglal az oldalon, de már nem láthatja (olyan, mintha az opacitást 0-ra állítanánk). Érdekes módon ez a tulajdonság alapértelmezés szerint nem öröklődik. Ez azt jelenti, hogy a display vagy opacity tulajdonságokkal ellentétben létrehozhatsz egy elemet hidden, és ennek ellenére is az egyik gyermeke megvan visible:
Figyeljük meg, hogy míg a rejtett, a szülő elem nem váltja ki :hover.
összeomlás
Ez csak a táblázatsorokat ( ), a sorcsoportokat (például ), az oszlopokat ( ), az oszlopcsoportokat ( ) vagy az ilyen módon átgondolt elemeket display) befolyásolja.
Ellentétben hiddenez az érték elrejti a tábla alelemet, anélkül, hogy elhagyná a helyet, ahol volt. Ha bárhol használjuk, csak egy tábla alelemen, akkor hasonlóan működik visibility: hidden.
Annyi furcsaság van ezzel, hogy nehéz megtudni, hol kezdjem. Csak előételként:
- A Chrome / Safari összeomlik egy sorban, de az általa elfoglalt hely megmarad. És ha a belső táblázat celláinak van szegélye, akkor az a felső szél mentén egyetlen szegélygé fog összeomlani.
- A Chrome / Safari nem fogja össze az oszlopot vagy az oszlopcsoportot.
- A Safari összecsuk egy táblázat cellát (hibás), de a Chrome nem (jobb).
- Bármely böngészőben, ha egy cella összeesett oszlopban van (függetlenül attól, hogy valóban összeomlik-e vagy sem), akkor a cella szövege nem jelenik meg.
- Az Opera (pre WebKit) összezúzza a szarokat, kivéve egy táblázat cellát (ami helyes).
Van még, de alapvetően: soha ne használja ezt.
örököl
Az alapértelmezett érték. Ez egyszerűen arra készteti az elemet, hogy örökölje a szülő értékét.
Flexbox
visibility: collapse; a Flexbox-ban is használatos, és jobban meghatározható.
Böngésző támogatás
Az alapok, és nem vesszük figyelembe az összes összeomlott furcsaságot:
| Bármi | Bármi | Bármi | 4+ | 4+ | Bármi | Bármi |
IE 7- nem támogatja collapsevagy inherit.