Respuestas:
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> | testReemplazar [style-tag-value]con display:noneresultados en:
test | | testReemplazar [style-tag-value]con visibility:hiddenresultados en:
test | | testvisibility: 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).
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.
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.
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.(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?
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á.
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.
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.
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.
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.
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
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>Otra diferencia es que visibility:hiddenfunciona en navegadores muy, muy viejos, y display:noneno:
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:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), todos regresan 0s.Efectos y efectos secundarios de visibility: hidden:
innerText(pero no innerHTML) del elemento de destino y sus descendientes devuelve una cadena vacía.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
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: