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.
