La visibilitypropiedad en CSS tiene dos funciones diferentes. Oculta filas y columnas de una tabla y también oculta un elemento sin cambiar el diseño.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilitytiene cuatro valores válidos: visible, hidden, collapse, y inherit. Revisaremos cada uno de ellos para obtener más información.
visible
Tal como suena, visiblehace las cosas visibles. Nada está oculto de forma predeterminada, por lo que este valor no hace nada a menos que haya establecido hiddenesto o un elemento principal de este elemento.
oculto
El hidden valor esconde cosas. Esto es diferente a usar display: none, porque hidden solo oculta elementos visualmente. El elemento todavía está allí y todavía ocupa espacio en la página, pero ya no puede verlo (algo así como cambiar la opacidad a 0). Curiosamente, esta propiedad no se hereda por defecto. Eso significa que, a diferencia de las propiedades display o opacity, puede crear un elemento hiddeny aún tener uno de sus hijos como visible, así:
Tenga en cuenta que, mientras está oculto, el elemento padre no activa el :hover.
colapso
Este solo afecta las filas de la tabla ( ), los grupos de filas (como ), las columnas ( ), los grupos de columnas ( ) o los elementos hechos para ser así a través de display).
A diferencia hidden, este valor oculta el subelemento de la tabla, sin dejar el espacio donde estaba. Si se usa en cualquier lugar menos en un subelemento de tabla, actúa como visibility: hidden.
Hay tantas peculiaridades en esto que es difícil saber por dónde empezar. Solo como aperitivo:
- Chrome / Safari colapsará una fila, pero el espacio que ocupaba permanecerá. Y si las celdas de la tabla en el interior tienen un borde, se colapsará en un solo borde a lo largo del borde superior.
- Chrome / Safari no colapsará una columna o grupo de columnas.
- Safari colapsa una celda de la tabla (incorrecto) pero Chrome no (correcto).
- En cualquier navegador, si una celda está en una columna que está contraída (ya sea que se contraiga o no), el texto de esa celda no se mostrará.
- Opera (pre WebKit) colapsará la basura de todo, excepto de una celda de la tabla (que es correcta).
Hay más, pero básicamente: no uses esto nunca.
heredar
El valor predeterminado. Esto simplemente hace que el elemento herede el valor de su padre.
Flexbox
visibility: collapse; también se utiliza en Flexbox, y está más bien definido.
Soporte del navegador
Lo básico, sin considerar todas las peculiaridades del colapso:
| Alguna | Alguna | Alguna | 4+ | 4+ | Alguna | Alguna |
IE 7- no es compatible con collapseo inherit.