La visibilityproprietà in CSS ha due diverse funzioni. Nasconde righe e colonne di una tabella e nasconde anche un elemento senza modificare il layout.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityha quattro valori validi: visible, hidden, collapse, e inherit. Analizzeremo ciascuno di essi per saperne di più.
visibile
Proprio come sembra, visiblerende le cose visibili. Niente è nascosto per impostazione predefinita, quindi questo valore non fa nulla a meno che tu non abbia impostato hiddenquesto o un genitore di questo elemento.
nascosto
Il hidden valore nasconde le cose. Questo è diverso dall'uso display: none, perché hidden nasconde solo visivamente gli elementi. L'elemento è ancora lì e occupa ancora spazio sulla pagina, ma non puoi più vederlo (un po 'come impostare l'opacità su 0). È interessante notare che questa proprietà non eredita per impostazione predefinita. Ciò significa che, a differenza delle proprietà display o opacity, puoi creare un elemento hiddene avere ancora uno dei suoi figli in visiblequesto modo:
Si noti che, sebbene nascosto, l'elemento genitore non attiva il :hover.
crollo
Questo ha effetto solo sulle righe della tabella ( ), sui gruppi di righe (come ), sulle colonne ( ), sui gruppi di colonne ( ) o sugli elementi creati in questo modo tramite display).
Diversamente hidden, questo valore nasconde il sottoelemento della tabella, senza lasciare lo spazio dove si trovava. Se usato ovunque ma su un sottoelemento di tabella, si comporta come visibility: hidden.
Ci sono così tante stranezze con questo che è difficile sapere da dove cominciare. Proprio come antipasto:
- Chrome / Safari comprimerà una riga, ma lo spazio che occupava rimarrà. E se le celle della tabella all'interno avevano un bordo, questo collasserà in un unico bordo lungo il bordo superiore.
- Chrome / Safari non comprimerà una colonna o un gruppo di colonne.
- Safari comprime una cella della tabella (sbagliato) ma Chrome no (giusto).
- In qualsiasi browser, se una cella si trova in una colonna compressa (indipendentemente dal fatto che venga compressa o meno), il testo in quella cella non verrà visualizzato.
- Opera (pre WebKit) comprimerà tutto, tranne una cella di tabella (che è corretta).
C'è di più, ma fondamentalmente: non usarlo mai.
ereditare
Il valore predefinito. Questo fa semplicemente sì che l'elemento erediti il valore del suo genitore.
Flexbox
visibility: collapse; è utilizzato anche in Flexbox e più ben definito.
Supporto browser
Le basi, senza considerare tutte le stranezze con il collasso:
| Qualunque | Qualunque | Qualunque | 4+ | 4+ | Qualunque | Qualunque |
IE 7- non supporta collapseo inherit.