De visibilityeigenschap in CSS heeft twee verschillende functies. Het verbergt rijen en kolommen van een tabel, en het verbergt ook een element zonder de lay-out te wijzigen.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityheeft vier geldige waarden: visible, hidden, collapse, en inherit. We zullen ze allemaal doornemen om meer te leren.
zichtbaar
Net zoals het klinkt, visiblemaakt dingen zichtbaar. Niets is standaard verborgen, dus deze waarde doet niets tenzij u hiddendit of een ouder van dit element heeft ingesteld.
verborgen
De hidden waarde verbergt dingen. Dit is anders dan gebruiken display: none, omdat hidden alleen elementen visueel worden verborgen. Het element is er nog steeds en neemt nog steeds ruimte in op de pagina, maar je kunt het niet meer zien (een beetje zoals de dekking op 0 zetten). Interessant is dat deze eigenschap niet standaard overerft. Dat betekent dat je, in tegenstelling tot de display of opacity eigenschappen, een element kunt maken hiddenen toch een van zijn kinderen kunt hebben visible, zoals dit:
Merk op dat, hoewel verborgen, het bovenliggende element de :hover.
ineenstorting
Deze heeft alleen effect op tabelrijen ( ), rijgroepen (zoals ), kolommen ( ), kolomgroepen ( ) of elementen die op die manier zijn gemaakt via display).
In tegenstelling tot hiddendeze waarde verbergt deze waarde het table-subelement, zonder de ruimte te verlaten waar het was. Als het ergens anders dan op een tabelsubelement wordt gebruikt, werkt het als visibility: hidden.
Dit heeft zoveel eigenaardigheden dat het moeilijk is om te weten waar je moet beginnen. Gewoon als voorgerecht:
- Chrome / Safari wordt een rij samengevouwen, maar de ruimte die het innam, blijft behouden. En als de tabelcellen binnenin een rand hebben, zal die langs de bovenrand in een enkele rand vallen.
- Chrome / Safari zal een kolom of kolomgroep niet samenvouwen.
- Safari klapt een tabelcel samen (verkeerd) maar Chrome niet (goed).
- In elke browser, als een cel zich in een kolom bevindt die is samengevouwen (ongeacht of deze daadwerkelijk is samengevouwen), wordt de tekst in die cel niet weergegeven.
- Opera (vóór WebKit) zal de rotzooi uit alles laten vallen, behalve een tabelcel (wat correct is).
Er is meer, maar eigenlijk: gebruik dit nooit.
erven
De standaardwaarde. Dit zorgt er simpelweg voor dat het element de waarde van zijn ouder overneemt.
Flexbox
visibility: collapse; wordt ook gebruikt in Flexbox, en beter gedefinieerd.
Browser-ondersteuning
De basis, afgezien van alle eigenaardigheden van instorten:
| Ieder | Ieder | Ieder | 4+ | 4+ | Ieder | Ieder |
IE 7 ondersteunt geen collapseof inherit.