“visilitity:hidden” frente a “display:none”
visibility es una propiedad de CSS mucho más limitada que display ya que esta última permite cambiar el tipo de caja de un elemento y visibility sólo hacerla visible o invisible, no obstante está bien conocerla para saber cuando sacarle todo el partido que tiene.
La propiedad “display:none” oculta el elemento html al que se le aplica, desaparece la caja que lo conforma y por tanto todo su contenido no dejando ningún rastro de él para el usuario. “visibility:hidden” hace invisible el elemento html y su contenido, la diferencia es que los elementos interiores invisibles se pueden hacer visibles aplicándoles la propiedad “visibility:visible”.
En la imagen que os dejo se ven gráficamente estas cualidades y como, además, la propiedad display puede afectar a la disposición del resto de los elementos de la página mientras que la de visibility no. Esto es así ya que al no ocultarse si no hacerse invisible, se respeta el lugar que ocupa y el resto de elementos siguen funcionando como si esta estuviera visible.
Febrero 1st, 2010 at 9:10 am
[...] en CSS; si colocamos un campo como “display: none” y nos llega una petición del formulario que haya rellenado el campo invisible, sabremos entonces [...]