visibility
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Resumen
La propiedad visibility
se usa para dos efectos:
- El valor
hidden
esconde un elemento, pero deja (vacío) el espacio donde debería aparecer. - El valor
collapse
esconde filas o columnas de una tabla.
Valor incial
:visible
- Se aplica a: Todos los elementos.
Valor heredado
: Sí- Porcentajes: N/A
- Medio:
visual
Valor calculado
: Como se especifica.
Sintaxis
visibility: visible | hidden | collapse | inherit
Valores
visible
-
El elemento se muestra normalmente.
-
El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad
visibility: visible
, descendientes de ése elemento serán visibles. collapse
-
Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código
a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos,display
: nonecollapse
funciona comohidden
).
Ejemplos
p { visibility: hidden; } /* Los párrafos no serán visibles */ p.showme { visibility: visible; } /* excepto los que tengan class = showme (clase= muéstrame) */ tr.col { visibility: collapse; } /* las filas de la tabla con la clasecol se fusionarán*/
Notas
El soporte para visibility: collapse
no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como visibility: hidden
en elementos que no son filas / columnas de una tabla.
visibility:collapse
puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente visibility: visible
en la tabla anidada.