Den visibilityejendom i CSS har to forskellige funktioner. Det skjuler rækker og kolonner i en tabel, og det skjuler også et element uden at ændre layoutet.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityhar fire gyldige værdier: visible, hidden, collapse, og inherit. Vi gennemgår hver af dem for at lære mere.
synlig
Ligesom det lyder, visiblegør tingene synlige. Intet er skjult som standard, så denne værdi gør intet, medmindre du har indstillet hiddendette eller en forælder til dette element.
skjult
Den hidden værdi skjuler ting. Dette er anderledes end at bruge display: none, fordi hidden kun visuelt skjuler elementer. Elementet er der stadig og tager stadig plads på siden, men du kan ikke se det længere (som at dreje opaciteten til 0). Interessant nok arver denne ejendom ikke som standard. Det betyder, at i modsætning til egenskaberne display eller opacitykan du oprette et element hiddenog stadig have et af dets børn som visiblesådan:
Bemærk, at det overordnede element ikke udløser, mens det er skjult :hover.
bryder sammen
Denne påvirker kun tabelrækker ( ), række grupper (som ), kolonner ( ), kolonnegrupper ( ) eller elementer, der er lavet til at være sådan via display).
I modsætning hiddenhertil skjuler denne værdi tabelelementet uden at efterlade det rum, hvor det var. Hvis den bruges et andet sted end på et tabelelement, fungerer det som visibility: hidden.
Der er så mange særheder med dette, at det er svært at vide, hvor man skal begynde. Ligesom en forretter:
- Chrome / Safari kollapser en række, men den plads, den optager, forbliver. Og hvis bordcellerne inde havde en kant, kollapser den til en enkelt kant langs den øverste kant.
- Chrome / Safari kollapser ikke en kolonne eller kolonnegruppe.
- Safari skjuler en tabelcelle (forkert), men Chrome vil ikke (højre).
- I en hvilken som helst browser, hvis en celle er i en kolonne, der er skjult (uanset om den faktisk kollapser), vises teksten i den celle ikke.
- Opera (pre WebKit) vil skjule skidtet ud af alt undtagen en tabelcelle (hvilket er korrekt).
Der er mere, men dybest set: brug ikke dette nogensinde.
arve
Standardværdien. Dette får simpelthen elementet til at arve værdien af dets overordnede.
Flexbox
visibility: collapse; bruges også i Flexbox og mere veldefineret.
Browsersupport
Det grundlæggende, når man ikke tager i betragtning alle besynderne med sammenbrud:
| Nogen | Nogen | Nogen | 4+ | 4+ | Nogen | Nogen |
IE 7- understøtter ikke collapseeller inherit.