Den visibilityegendom i CSS har två olika funktioner. Det döljer rader och kolumner i en tabell och det döljer också ett element utan att ändra layouten.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityhar fyra giltiga värden: visible, hidden, collapse, och inherit. Vi går igenom var och en av dem för att lära oss mer.
synlig
Precis som det låter visibleblir saker synliga. Ingenting är dolt som standard, så detta värde gör ingenting om du inte har ställt in det hiddenhär eller en förälder till detta element.
dold
Det hidden värdet döljer saker. Detta är annorlunda än att använda display: none, eftersom hidden endast visuellt döljer element. Elementet finns kvar och tar fortfarande plats på sidan, men du kan inte se det längre (ungefär som att vända opaciteten till 0). Intressant är det att den här egenskapen inte ärver som standard. Det betyder att, till skillnad från egenskaperna display eller opacity, kan du skapa ett element hiddenoch ändå ha ett av sina barn som visible, så här:
Lägg märke till att det överordnade elementet inte är aktivt medan det är dolt :hover.
kollaps
Den här påverkar bara tabellrader ( ), radgrupper (som ), kolumner ( ), kolumngrupper ( ) eller element som är gjorda för att vara så via display).
Till skillnad från hiddendetta döljer detta värde tabellunderelementet utan att lämna utrymmet där det var. Om den används var som helst utom i ett tabellunderelement, fungerar det som visibility: hidden.
Det finns så många konstigheter med detta att det är svårt att veta var man ska börja. Precis som förrätt:
- Chrome / Safari kommer att kollapsa en rad, men utrymmet den upptar kvarstår. Och om bordscellerna inuti hade en kant kommer den att kollapsa till en enda kant längs överkanten.
- Chrome / Safari kollapsar inte en kolumn eller kolumngrupp.
- Safari kollapsar en tabellcell (fel) men Chrome kommer inte (rätt).
- I en webbläsare, om en cell finns i en kolumn som har kollapsat (oavsett om den faktiskt kollapsar) kommer inte texten i den cellen att visas.
- Opera (före WebKit) kommer att kollapsa skiten ur allt, förutom en tabellcell (vilket är korrekt).
Det finns mer, men i princip: använd inte det här någonsin.
ärva
Standardvärdet. Detta får enkelt elementet att ärva värdet av sin förälder.
Flexbox
visibility: collapse; används också i Flexbox och mer väl definierat.
Webbläsarstöd
Grunderna, med tanke på alla konstigheter med kollaps:
| Några | Några | Några | 4+ | 4+ | Några | Några |
IE 7- stöder inte collapseeller inherit.