Propiedad visibility de CSS
La propiedad visibility se utiliza para especificar si un elemento debe ser visible u oculto para el usuario.
Tiene los siguientes valores: visible, hidden y collapse.
Cuando el elemento se establece en "hidden", el contenido de esa etiqueta se vuelve completamente transparente, pero conserva su espacio original en el diseño. Los elementos descendientes del elemento oculto pueden ser visibles si se les aplica visibility: visible.
Si el valor de la propiedad visibility se establece en "collapse", se utiliza con elementos relacionados con tablas (como filas, columnas y celdas) para eliminarlos del diseño mientras se preserva la estructura de la tabla.
WARNING
Algunos navegadores no utilizan el valor "collapse".
| Valor inicial | visible |
|---|---|
| Se aplica a | Todos los elementos (collapse solo se aplica a elementos relacionados con tablas). |
| Heredado | Sí. |
| Animable | Sí. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.visibility = "collapse"; |
Sintaxis
Sintaxis de la propiedad visibility de CSS
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Ejemplo de la propiedad visibility con el valor "hidden":
Ejemplo de la propiedad visibility de CSS con el valor hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Resultado
Ejemplo de la propiedad visibility con los valores "visible" y "hidden":
Ejemplo de la propiedad visibility de CSS con los valores visible y hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Ejemplo de la propiedad visibility con el valor "collapse":
Ejemplo de la propiedad visibility de CSS con el valor collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| visible | En este caso la etiqueta es visible. Este es el valor predeterminado de esta propiedad. | Probar » |
| hidden | Este valor solo oculta visualmente los elementos. | Probar » |
| collapse | Se utiliza con elementos de tabla específicos (filas, grupos de filas, columnas, grupos de columnas) para eliminar filas o columnas enteras. Este valor tiene el mismo significado que "hidden" cuando se usa con otros elementos. | Probar » |
| initial | Hace que la propiedad use su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. | |
| revert | Revierte la propiedad a su valor heredado o inicial, dependiendo de lo que corresponda. | Probar » |
| revert-layer | Revierte la propiedad al valor establecido en la capa anterior de la cascada. | Probar » |
Practice
¿Cuáles son los posibles valores de la propiedad CSS 'visibility'?