La visibilitypropriété en CSS a deux fonctions différentes. Il masque les lignes et les colonnes d'un tableau et masque également un élément sans modifier la disposition.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitya quatre valeurs valides: visible, hidden, collapseet inherit. Nous passerons en revue chacun d'eux pour en savoir plus.
visible
Tout comme ça sonne, visiblerend les choses visibles. Rien n'est masqué par défaut, donc cette valeur ne fait rien sauf si vous avez défini hiddensur cet élément ou sur un parent de cet élément.
caché
La hidden valeur cache des choses. Ceci est différent de l'utilisation display: none, car hidden ne masque que visuellement les éléments. L'élément est toujours là et prend toujours de la place sur la page, mais vous ne pouvez plus le voir (un peu comme si vous changiez l'opacité à 0). Fait intéressant, cette propriété n'hérite pas par défaut. Cela signifie que, contrairement aux propriétés display ou opacity, vous pouvez créer un élément hiddenet avoir toujours l'un de ses enfants visiblecomme ceci:
Notez que, bien qu'il soit masqué, l'élément parent ne déclenche pas le :hover.
s'effondrer
Celui-ci n'a d'effet que sur les lignes de table ( ), les groupes de lignes (comme ), les colonnes ( ), les groupes de colonnes ( ) ou les éléments créés pour être ainsi via display).
Contrairement hidden, cette valeur masque le sous-élément de table, sans laisser l'espace où il se trouvait. S'il est utilisé n'importe où sauf sur un sous-élément de table, il agit comme visibility: hidden.
Il y a tellement de bizarreries avec cela qu'il est difficile de savoir par où commencer. Juste comme apéritif:
- Chrome / Safari réduira une ligne, mais l'espace qu'il occupait restera. Et si les cellules du tableau à l'intérieur avaient une bordure, cela se réduira en une seule bordure le long du bord supérieur.
- Chrome / Safari ne réduira pas une colonne ou un groupe de colonnes.
- Safari réduit une cellule de tableau (faux) mais Chrome ne le fera pas (à droite).
- Dans n'importe quel navigateur, si une cellule se trouve dans une colonne qui est réduite (qu'elle soit réellement réduite ou non), le texte de cette cellule ne sera pas affiché.
- Opera (pré WebKit) réduira la merde de tout, sauf une cellule de tableau (ce qui est correct).
Il y a plus, mais fondamentalement: ne l'utilisez jamais.
hériter
La valeur par défaut. Cela fait simplement que l'élément hérite de la valeur de son parent.
Flexbox
visibility: collapse; est également utilisé dans Flexbox et mieux défini.
Prise en charge du navigateur
Les bases, sans tenir compte de toutes les bizarreries de l'effondrement:
| Tout | Tout | Tout | 4+ | 4+ | Tout | Tout |
IE 7- ne prend pas en charge collapseou inherit.