Diferencia entre ‘display: none’ y ‘visibility: hidden’ en CSS

Diferencia entre ‘display: none’ y ‘visibility: hidden’ en CSS

Diferencia entre ‘display: none’ y ‘visibility: hidden’ en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Puede haber ocasiones, a medida que trabaja en el desarrollo de páginas web, en las que necesite «ocultar» áreas específicas de elementos por una razón u otra. Por supuesto, usted podría, simplemente, eliminar el/los elemento(s) en cuestión de la marcación HTML, pero qué pasa si desea que permanezcan en el código, pero no se muestren en la pantalla del navegador por la razón que sea (y revisaremos las razones para hacerlo en breve). Para mantener un elemento en su HTML, pero ocultarlo para mostrarlo, debería recurrir a CSS.

Las dos formas más comunes de ocultar un elemento que está en el HTML sería utilizando las propiedades CSS para «mostrar» o «visibilidad». A primera vista, estas dos propiedades pueden parecer en gran medida lo mismo, pero cada una de ellas tiene diferencias distintas que usted debe tener en cuenta. Echemos un vistazo a las diferencias entre

visualización: ninguna

y

Visibilidad

Usando el par propiedad/valor de CSS de

oculta un elemento del navegador. Sin embargo, ese elemento oculto todavía ocupa espacio en el diseño. Es como si básicamente hubieras hecho invisible el elemento, pero sigue estando en su lugar y ocupa el espacio que habría ocupado si se hubiera dejado solo.

Si colocas un DIV en tu página y usas CSS para darle dimensiones para que ocupe 100×100 píxeles, el

hará que el DIV no se muestre en la pantalla, pero el texto que le sigue actuará como si siguiera ahí, respetando ese espacio de 100×100.

La propiedad de la visibilidad no es algo que utilicemos con mucha frecuencia, y ciertamente no por sí sola. Si también utilizamos otras propiedades CSS como el posicionamiento para conseguir la disposición que queríamos para un determinado elemento, podríamos utilizar la visibilidad para ocultar ese elemento inicialmente, sólo para «girarlo» y volverlo a colocar en el aire. Ese es un posible uso de esta propiedad, pero una vez más, no es algo a lo que recurrimos con ninguna frecuencia.

Mostrar

A diferencia de la propiedad visibility, que deja un elemento en el flujo normal de documentos,

visualización: ninguna

elimina el elemento completamente del documento. No ocupa ningún espacio, a pesar de que el HTML para ello sigue estando en el código fuente. Esto se debe a que, de hecho, se elimina del flujo de documentos. A todos los efectos, el objeto ha desaparecido. Esto puede ser algo bueno o malo, dependiendo de cuáles sean sus intenciones. También puede ser perjudicial para su página si hace un mal uso de esta propiedad!

A menudo utilizamos «display: none» cuando probamos una página. Si necesitamos que un área «desaparezca» durante un tiempo para que podamos probar otras áreas de la página, podemos usar «display: none» para ello. Lo que hay que recordar, sin embargo, es que el elemento debe ser devuelto a la página antes del lanzamiento real de ese sitio. Esto se debe a que un elemento que se elimina del flujo de documentos en este método no es visto por los motores de búsqueda o lectores de pantalla, aunque pueda permanecer en el marcado HTML. En el pasado, este método se utilizaba como un método de sombrero negro para tratar de influir en las clasificaciones de los motores de búsqueda, por lo que los elementos que no se muestran podrían ser una señal de alarma para que Google investigue por qué se está utilizando este enfoque.

Una forma en que encontramos «display: none» para ser útil, y donde lo usamos en sitios web de producción en vivo, es cuando estamos construyendo un sitio sensible que puede tener elementos que están disponibles para un tamaño de visualización pero no para otros. Puede utilizar «display: none» para ocultar ese elemento y luego volver a activarlo con las consultas de los medios de comunicación. Este es un uso aceptable de «display: none» porque no estás tratando de ocultar nada por razones nefastas, sino que tienes una necesidad legítima de hacerlo.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,