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.

TAMBIÉN TE INTERESA

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.