Den visibilityeiendom i CSS har to forskjellige funksjoner. Den skjuler rader og kolonner i en tabell, og den skjuler også et element uten å endre oppsettet.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityhar fire gyldige verdier: visible, hidden, collapse, og inherit. Vi går gjennom hver av dem for å lære mer.
synlig
Akkurat som det høres ut, visibleblir ting synlige. Ingenting er skjult som standard, så denne verdien gjør ingenting med mindre du har angitt hiddendette eller en av foreldrene til dette elementet.
skjult
Den hidden verdien skjuler ting. Dette er annerledes enn å bruke display: none, fordi hidden bare visuelt skjuler elementer. Elementet er fremdeles der, og tar fortsatt plass på siden, men du kan ikke se det lenger (som å snu opasiteten til 0). Interessant, denne egenskapen arver ikke som standard. Det betyr at, i motsetning til egenskapene display eller opacity, kan du lage et element hidden, og fortsatt ha et av barna som visible, slik:
Legg merke til at foreldreelementet ikke er aktivert mens det er skjult :hover.
kollapse
Denne påvirker bare tabellrader ( ), radgrupper (som ), kolonner ( ), kolonnegrupper ( ) eller elementer laget for å være slik via display).
I motsetning til hiddendette skjuler denne verdien tabellelementet, uten å etterlate rommet der det var. Hvis det brukes hvor som helst, men på et underelement i tabellen, fungerer det som visibility: hidden.
Det er så mange særegenheter med dette at det er vanskelig å vite hvor du skal begynne. Akkurat som forrett:
- Chrome / Safari vil kollapse en rad, men plassen den okkuperer vil forbli. Og hvis bordcellene inne hadde en kant, vil den kollapse til en enkelt kant langs toppkanten.
- Chrome / Safari vil ikke skjule en kolonne eller kolonnegruppe.
- Safari kollapser en tabellcelle (feil), men Chrome vil ikke (høyre).
- I en hvilken som helst nettleser, hvis ikke en celle er i en kolonne som er skjult (om den faktisk kollapser eller ikke), vises ikke teksten i den cellen.
- Opera (pre WebKit) vil kollapse dritten av alt, bortsett fra en tabellcelle (som er riktig).
Det er mer, men i utgangspunktet: ikke bruk dette noensinne.
arve
Standardverdien. Dette fører ganske enkelt til at elementet arver verdien til foreldrene.
Flexbox
visibility: collapse; brukes også i Flexbox, og mer veldefinert.
Nettleserstøtte
Det grunnleggende, ikke med tanke på alle særegenheter med kollaps:
| Noen | Noen | Noen | 4+ | 4+ | Noen | Noen |
IE 7- støtter ikke collapseeller inherit.