La Propiedad 'visibility' en CSS

La propiedad 'visibility' en CSS es la responsable de controlar la visibilidad de un elemento en una página web. Esta propiedad permite mostrar u ocultar elementos del documento HTML.

La propiedad 'visibility' puede tomar varios valores:

• visible: Se muestra el elemento. Es el valor por defecto.
• hidden: Se oculta el elemento, pero sigue ocupando espacio en la página.
• collapse: Es utilizado principalmente con tablas. Si se aplica a elementos que no sean filas o columnas de tabla, se comporta como 'hidden'.

Es importante mencionar que aunque la propiedad 'visibility' pueda ocultar un elemento, este todavía ocupa espacio en el layout de la página. Si se quiere ocultar un elemento sin dejar espacio vacío, se debería utilizar la propiedad 'display' con el valor 'none'.

Un ejemplo práctico de la propiedad 'visibility' sería en un formulario de inicio de sesión, donde se puede mostrar un mensaje de error que se encontraba previamente oculto, al ocurrir algun error durante el inicio de sesión; esto se lograría cambiando el valor de 'hidden' a 'visible' de la propiedad 'visibility' utilizando Javascript.

<p id="error" style="visibility: hidden;">Username o contraseña incorrectos</p>

document.getElementById('error').style.visibility = 'visible';

Por último, recordemos que a la hora de diseñar el layout de una página web, es fundamental saber cuándo usar la propiedad 'visibility' y cuándo usar 'display', debido a sus propias características. Mientras que 'display' puede sacar completamente un elemento del flujo de la página, 'visibility' solo lo oculta, pero el espacio que ocupaba se mantiene.