Características visibility en CSS

La propiedad visibility en CSS permite mostrar u ocultar un elemento sin afectar el diseño del documento, lo que significa que se reservará espacio para los elementos, sean visibles o no, y esta propiedad también se puede usar para ocultar o mostrar columnas en una tabla <table>.

Funciones visibility css

Valor inicial	`visible`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Como se especificó.

/* palabras reservadas */ 
visibility: visible;
visibility: hidden;
visibility: collapse;
/* valores globales */ 
visibility: inherit;
visibility: initial;
visibility: unset;

Nota: Si desea ocultar y eliminar el elemento del diseño del documento, establezca la propiedad display de valor en none lugar de utilizar el visibility.

Ejemplos y aplicaciones en código

Un ejemplo de uso de la propiedad visibility para ocultar un elemento <p> entre otros dos. El ejemplo muestra cómo el espacio que ocupaba el elemento todavía está reservado:

< p  class = "visible" > El primer párrafo es visible. </ p > 
< p  class = "not-visible" > El segundo párrafo no es visible. </ p > 
< p  class = "visible" > El tercer párrafo es visible. Tenga en cuenta que el segundo párrafo todavía ocupa espacio. </ p >

Código CSS:

.visible {
  visibility: visible;
}
.not-visible {
  visibility: hidden;
}

Usando el valor collapse de los elementos de la tabla, que tendrá el mismo efecto que la regla display: none pero sin volver a calcular las dimensiones de la tabla:

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Código CSS:

.collapse {
  visibility: collapse;
}
table {
  border: 1px solid red;
}
td {
  border: 1px solid gray;
}

Tenga en cuenta que es posible que este ejemplo no funcione en los navegadores Chrome y Safari como debería.

Soporte de navegadores

Característica	Chromo	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	4.0	1.0

La compatibilidad con palabras reservadas collapse no está completa o tiene errores en algunos navegadores modernos (como Chrome y Safari), y esos navegadores pueden tratar este valor como lo harían hidden.

Características generales

La propiedad visibility acepta el valor de una de las palabras clave que se enumeran a continuación.

visible

El cuadro de elementos es visible.

hidden

El cuadro de elementos no está visible, pero afectará el diseño de la página como de costumbre. Los hijos del elemento pueden ser visibles si la propiedad se establece visibilityen visible.

collapse

Esta propiedad solo se usa con elementos de tabla, permite eliminar por completo una línea o columna (como si usáramos la regla display: none), y el espacio tomado de la línea o columna estará disponible para el resto del contenido. Si usa este valor en otros elementos, tendrá el mismo efecto hidden.

Estructura visibility css

visibility: visible | hidden | collapse;

Consulte también

La página de propiedades position que describe cómo se coloca el objeto en el documento.
Página de propiedades float que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.
La página de propiedades display que especifica qué tipo de cuadro de visualización se utilizará con el elemento.