¿Cuál es la diferencia entre visibilidad: oculta y pantalla: ninguna?

1173

Las reglas CSS visibility:hiddeny display:noneambas dan como resultado que el elemento no sea visible. ¿Son estos sinónimos?

css visibility Chris Noe
fuente

Respuestas:

1475

display:nonesignifica que la etiqueta en cuestión no aparecerá en la página (aunque aún puede interactuar con ella a través del dom). No habrá espacio asignado para ello entre las otras etiquetas.

visibility:hiddensignifica que display:none, a diferencia de , la etiqueta no es visible, pero se le asigna espacio en la página. La etiqueta se representa, simplemente no se ve en la página.

Por ejemplo:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Reemplazar [style-tag-value]con display:noneresultados en:

test |   | test

Reemplazar [style-tag-value]con visibility:hiddenresultados en:

test |                        | test
kemiller2002
fuente
14
No hay comentarios sobre el rendimiento de uno y otro? Tengo curiosidad por saber qué método usar para ocultar elementos posicionados absolutamente, que se muestran y ocultan a menudo.
Tomáš Zato - Restablece a Mónica el
2
Esta es una suposición total de que no he hecho ninguna prueba, pero supongo que son casi lo mismo. Tan pronto como algo cambie en la pantalla, toda la pantalla se volverá a renderizar (al menos solía hacerlo), por lo que realmente no importa. Todavía estás obligando a volver a pintar la pantalla. Sin embargo, esto podría muy bien navegador por navegador y, en verdad, probablemente haya mejores formas de optimizar el código que centrarse en ellos.
kemiller2002
13
@Kevin es correcto en eso visibility: hiddeny display: noneserá igualmente eficiente ya que ambos reactivan el diseño, la pintura y el compuesto. Sin embargo, opacity: 0es funcionalmente equivalente visibility: hiddeny no vuelve a activar el paso de diseño, por lo que recomendaría usarlo si no le importa que el espacio vacío aún se asigne (de lo contrario, use display: none).
jayrobin
76
Es importante tener en cuenta las transiciones CSS cuando se habla de visibilidad frente a visualización. Por ejemplo, alternar desde la visibilidad: oculto; a la visibilidad: visible; permite el uso de css-transitions, mientras que alternar desde la pantalla: none; para mostrar: bloque; no. visibilidad: oculto tiene el beneficio adicional de no capturar eventos de JavaScript, mientras que la opacidad: 0; captura eventos.
Michael Deal
99
opacity: 0debe usarse con precaución cuando se manejan entradas o botones, ya que aún existirían y posiblemente causarían interacciones extrañas con el usuario.
jacques mouette
233

No son sinónimos

display:none elimina el elemento del flujo normal de la página, permitiendo que otros elementos se completen.

visibility:hidden deja el elemento en el flujo normal de la página, de modo que todavía ocupa espacio.

Imagina que estás en la fila para un paseo en un parque de diversiones y alguien en la fila se pone tan ruidoso que la seguridad los saca de la línea. Todos en la fila avanzarán una posición para llenar el espacio ahora vacío. Esto es como display:none.

Compare esto con una situación similar, pero que alguien delante de usted se ponga una capa de invisibilidad. Al ver la línea, parecerá que hay un espacio vacío, pero la gente realmente no puede llenar ese espacio vacío porque alguien todavía está allí. Esto es como visibility:hidden.

usuario22151
fuente
3
Hay otra gran diferencia entre ellos: al menos en Chrome, la visibilidad se puede usar con retraso de transición, pero la pantalla lo ignora.
SapphireSun
1
Una forma divertida de explicar, pero interesante. :)
Elango Paul Victor
107

Una cosa que vale la pena agregar, aunque no se preguntó, es que hay una tercera opción para hacer que el objeto sea completamente transparente. Considerar:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.
Expandir fragmento

(Asegúrese de hacer clic en el botón "Ejecutar fragmento de código" arriba para ver el resultado).

La diferencia entre 1 y 2 ya se ha señalado (es decir, 2 todavía ocupa espacio). Sin embargo, hay una diferencia entre 2 y 3: en el caso 3, el mouse aún cambiará a la mano al pasar el mouse sobre el enlace, y el usuario aún puede hacer clic en el enlace, y los eventos de Javascript seguirán disparándose en el enlace. Por lo general, este no es el comportamiento que desea (¿pero quizás a veces lo es?).

Otra diferencia es que si selecciona el texto, luego copia / pega como texto sin formato, obtendrá lo siguiente:

1st link.
2nd  link.
3rd unseen link.

En el caso 3, el texto se copia. ¿Tal vez esto sería útil para algún tipo de marca de agua, o si quisieras ocultar un aviso de derechos de autor que se mostraría si un usuario descuidado copiara / pegara su contenido?

Dormir
fuente
@greenoldman ¿Puedes dar un ejemplo? Aquí hay un jsfiddle donde un elemento oculto (probé div y span) que es el único elemento en su contenedor, y todavía ocupa espacio: jsfiddle.net/rmb5wdLd/1
Kip
@Kip, extraño: no puedo hacer esto ahora (y también cambié mi propio proyecto). OK, será mejor que elimine mi comentario anterior y cuando tenga un caso de prueba sólido lo mostraré, perdón por el ruido.
greenoldman
90

display:none elimina el elemento del flujo de diseño.

visibility:hidden lo oculta pero deja el espacio.

mmaibaum
fuente
70

Hay una gran diferencia cuando se trata de nodos secundarios. Por ejemplo: si tiene un div primario y un div secundario anidado. Entonces, si escribes así:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

En este caso, ninguno de los divs será visible. Pero si escribes así:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Entonces el div hijo será visible mientras que el div padre no se mostrará.

Govinda
fuente
Buen punto, esto se puede perder fácilmente. display: none / block no activará las transiciones, por lo que usar visibilidad: oculto puede funcionar, pero los elementos secundarios también necesitan vulnerabilidad: oculto al mismo tiempo
Drenai
18

No son sinónimos: display: noneelimina el elemento del flujo de la página y el resto de la página fluye como si no estuviera allí.

visibility: hidden oculta el elemento de la vista pero no el flujo de la página, dejando espacio para ello en la página.

ConroyP
fuente
15

display: none elimina el elemento de la página por completo, y la página se construye como si el elemento no estuviera allí en absoluto.

Visibility: hidden deja el espacio en el flujo del documento aunque ya no pueda verlo.

Esto puede o no hacer una gran diferencia dependiendo de lo que esté haciendo.

wcm
fuente
El uso de $ ('# elemento'). Remove () elimina por completo el elemento de la página (DOM). No mostrarlo o no usar espacio no significa eliminarlo. Todavía puede cambiar su estado con un simple $ ('# elemento'). Show (), por lo que no se "elimina por completo".
foxontherock
11

Con visibility:hiddenel objeto todavía ocupa altura vertical en la página. Con display:noneesto se elimina por completo. Si tiene texto debajo de una imagen y lo tiene display:none, ese texto se desplazará hacia arriba para llenar el espacio donde estaba la imagen. Si haces visibilidad: oculto, el texto permanecerá en la misma ubicación.

Steven Williams
fuente
Con oculto, es el espacio preservado solo la dimensión vertical. ¿Qué pasa horizontalmente?
Chris Noe
2
La dimensión horizontal también se conserva.
JB Hurteaux
9

display:noneocultará el elemento y colapsará el espacio que estaba ocupando, mientras visibility:hiddenque ocultará el elemento y preservará el espacio de los elementos. display: none también afecta algunas de las propiedades disponibles de javascript en versiones anteriores de IE y Safari.

slashnick
fuente
7

Además de todas las otras respuestas, hay una diferencia importante para IE8: si usa display:nonee intenta obtener el ancho o la altura del elemento, IE8 devuelve 0 (mientras que otros navegadores devolverán los tamaños reales). IE8 devuelve el ancho o alto correcto solo para visibility:hidden.

szeryf
fuente
7

visibility:hiddenpreserva el espacio; display:noneno lo hace

Perla
fuente
6 
display: none;

No estará disponible en la página y no ocupa ningún espacio. 

visibility: hidden;

oculta un elemento, pero aún ocupará el mismo espacio que antes. El elemento estará oculto, pero aún así, afectará el diseño.

visibility: hiddenpreservar el espacio, mientras display: noneque no preserva el espacio.

No mostrar ninguno Ejemplo: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Ejemplo oculto de visibilidad: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Anu
fuente
Aconsejaría no vincular a w3schools debido a las inexactitudes conocidas en el sitio web.
Skere
5

Si la propiedad de visibilidad se establece en "hidden", el navegador seguirá ocupando espacio en la página para el contenido, aunque sea invisible.
Pero cuando configuramos un objeto para "display:none", el navegador no asigna espacio en la página para su contenido.

Ejemplo:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Ver detalles

Shubelal Kumar
fuente
5

visibility:hidden mantendrá el elemento en la página y ocupará ese espacio pero no se lo mostrará al usuario.

display:none no estará disponible en la página y no ocupa ningún espacio.

Ramesh
fuente
2

La diferencia va más allá del estilo y se refleja en cómo se comportan los elementos cuando se manipulan con JavaScript.

Efectos y efectos secundarios de display: none:

  • el elemento de destino se saca del flujo de documentos (no afecta el diseño de otros elementos);
  • todos los descendientes se ven afectados (tampoco se muestran y no pueden "salir" de esta herencia);
  • mediciones no se pueden hacer para el elemento de destino ni de sus descendientes - que no se representan en absoluto, por tanto, su clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), todos regresan 0s.

Efectos y efectos secundarios de visibility: hidden:

  • el elemento objetivo está oculto a la vista, pero no se saca del flujo y afecta el diseño, ocupando su espacio normal;
  • innerText(pero no innerHTML) del elemento de destino y sus descendientes devuelve una cadena vacía.
Adam Jagosz
fuente
1

display:none;no mostrará el elemento ni asignará espacio para el elemento en la página, mientras visibility:hidden;que no mostrará el elemento en la página pero asignará espacio en la página. Podemos acceder al elemento en DOM en ambos casos. Para comprenderlo mejor, consulte el siguiente código: pantalla: ninguno vs visibilidad: oculto

Pritam Bohra
fuente
0

Aquí hay muchas respuestas detalladas, pero pensé que debería agregar esto para abordar la accesibilidad ya que hay implicaciones.

display: none;y visibility: hidden;puede no ser leído por todo el software lector de pantalla. Tenga en cuenta lo que experimentarán los usuarios con discapacidad visual.

La pregunta también se refiere a sinónimos. text-indent: -9999px;es otro que es más o menos equivalente. La diferencia importante con text-indentes que a menudo será leído por lectores de pantalla. Puede ser una mala experiencia ya que los usuarios aún pueden tabular el enlace.

Para accesibilidad, lo que veo usado hoy es una combinación de estilos para ocultar un elemento mientras es visible para los lectores de pantalla.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Una buena práctica es crear un enlace "Saltar al contenido" al ancla del cuerpo principal del contenido. Los usuarios con discapacidad visual probablemente no quieran escuchar su árbol de navegación completo en cada página. Haga el enlace visualmente oculto. Los usuarios pueden simplemente presionar la pestaña para acceder al enlace.

Para obtener más información sobre accesibilidad y contenido oculto, consulte:

cuchilla de carnicero
fuente