display:none y visibility:hidden son dos declaraciones de estilos que puedes usar para ocultar elementos en la pantalla con CSS. Pero, ¿cuáles son las diferencias entre ellos?

Al crear aplicaciones, hay ocasiones en las que deseas ocultar elementos visualmente (no eliminarlos del DOM, solo de la pantalla). Puedes hacer esto de diferentes maneras.

Dos enfoques comunes incluyen el uso de la propiedad display con el valor none o la propiedad  visibility con el valor hidden.

Aunque ambos enfoques ocultan el elemento visualmente, hacen que el elemento se comporte de diferentes maneras. Explicaré estas diferencias en este artículo.

Este es el ejemplo que usaré para explicar cómo funciona todo esto:

El HTML:

<div class="container">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
</div>

Y el CSS:

.container {
  padding: 20px;
  width: max-content;
  display: flex;
  border: 1px solid black;
}

.block1,
.block2,
.block3 {
  height: 40px;
  width: 120px;
}

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
}

.block3 {
  background-color: rgb(12, 154, 142);
}

Tenemos un div con una clase de container. Este div tiene tres divs hijos con clases de block1, block2 y block3, respectivamente. Hemos especificado algunos estilos para los divs. El primer hijo div es orange, el segundo es blue, y el tercero es teal.

Aquí está el resultado:

Cómo utilizar display: none en CSS

La propiedad display establece cómo se muestra un elemento (como inline o block) y también determina el diseño de los elementos hijos de un elemento padre (como flex, grid, etc.).

Con un valor none para esta propiedad, la visualización del elemento se desactiva. Esto significa que el elemento – así como sus hijos – no se mostrarán. El documento se representa sin el elemento, como si no existiera.

Ahora veremos cómo funciona display: none. A continuación se muestra un ejemplo con este estilo aplicado al elemento .block2:

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

Aquí está el resultado:

Como puedes ver aquí, el elemento .container ha reducido su ancho. Es como si el elemento .block2 no existiera. Debido a que usamos display:none en este elemento, no se representa en el documento. Entonces su espacio en la pantalla queda vacío para que lo ocupen otros elementos.

También podemos probar esto moviendo y agregando display: none al elemento .block1:

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  display: none;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

El resultado:

Aquí ves que .block1 y .block2 no se representan, por lo que sus espacios están ocupados.

Cómo utilizar visibility: hidden en CSS

La propiedad visibility, especifica si un elemento es visible o no. Pero esta propiedad no afecta el diseño del elemento. Esta es la principal diferencia en comparación con la propiedad layout.

Con un valor hidden para esta propiedad, el elemento al que se aplica se vuelve "invisible". El espacio requerido por el modelo de cajas del elemento permanece, pero el elemento en sí está oculto.

Veamos cómo se aplica esta propiedad a nuestro ejemplo anterior. Aquí está el resultado de este estilo aplicado al elemento .block2:

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  visibility: hidden;
}

El resultado:

Como notarás aquí, a diferencia de display: none, el elemento .block2 es invisible, pero su diseño permanece intacto. De hecho, el margin-right sobre este elemento todavía está ahí. Sólo el elemento en sí está oculto.

Agreguemos también este estilo a .block1 para ver el resultado:

Ahora ambos elementos son invisibles, pero aún se representan en el documento, por lo que su espacio no está vacío.

Lo siguiente que quizás estés pensando es "¿Cuál es la diferencia entre visibility: hidden y opacity: 0?"

visibility: hidden vs opacity: 0

Ambos estilos se ven muy similares. Puedo mostrarte esto reemplazando visibility:hidden con opacity:0 en nuestros ejemplos anteriores:

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  opacity: 0;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  opacity: 0;
}

El resultado:

Puedes ver que visualmene no hay diferencia entre este resultado y el anterior. Pero hay una diferencia en el comportamiento de los elementos.

Los elementos con visibility: hidden no son interactuables. No sé si esta es la mejor palabra para esto 😂 pero lo que quiero decir es que los usuarios no pueden interactuar (por ejemplo, haciendo click) con dichos elementos. Esto se debe a que dichos elementos son realmente invisbles.

Los elementos con opacity: 0, por otro lado, son interactivos, ya que en realidad son visibles, solo que están transparentes. La propiedad opacity no especifica la visibilidad de un elemento – solo especifica la transparencia.

Podemos comprobar esta diferencia con un ejemplo. Digamos que el elemento .block2 tenía un atributo onclick como este:

<div class="block2" onclick="alert('hello')"></div>

Si usa visibility:hidden en este elemento, al hacer click en el espacio donde está el elemento, no se activará nada. Pero si usa opacity:0 en este elemento, al hacer click en ese mismo espacio, se activará el modal de alerta que muestra el texto "hello". Puede probar esto en su navegador para verlo en vivo.

Casos de uso para display:none y visibility:hidden

Estas declaraciones de estilo pueden tener diferentes propósitovs dependiendo de lo que desee lograr.

En mi experiencia, uso display:none cuando quiero ocultar algo. Piense en ocultar una ventana emergente, un elemento de la lista de tareas pendientes en la interfaz de usuario o la barra lateral de una página.

El uso de visibility:hidden para estas cosas hace que se conserve su espacio y podría hacer que una página parezca extraña cuando hay un espacio en blanco.

Las únias veces que utilizo visibility:hidden es cuando quiero mostrar alguna animación mientras "oculto" o "muestro" un elemento. La propiedad display no permite animar entre valores, pero la propiedad visibility sí. Uso visibility en combinación con opacity para tales animaciones de aparición y desaparición gradual.

Concluyendo

En resumen, display: none, visibility: hidden, y opacity: 0 se pueden usar para ocultar elementos visualmente, pero:

• display: none desactiva el diseño de los elementos, por lo que no se representan.
• visibility: hidden oculta los elementos sin cambiar su diseño.
• opacity: 0 hace que los elementos sean transparentes, pero los usuarios pueden interactuar con ellos.

Si te ha gustado este artículo, compártelo con otros para aprender 😇