Propiedades de CSS: visualización frente a visibilidad

¿Cuál es la diferencia entre las propiedades de visualización y visibilidad?

La visibilitypropiedad solo le dice al navegador si debe mostrar un elemento o no. Es visible ( visiblepuede verlo) o invisible ( hiddenno puede verlo).

La displaypropiedad le dice al navegador cómo dibujar y mostrar un elemento, si es que lo hace, si debe mostrarse como un inlineelemento (es decir, fluye con texto y otros elementos en línea) o un blockelemento de nivel (es decir, tiene propiedades de alto y ancho que se puede establecer, es flotante, etc), o un inline-block(es decir, actúa como una caja de bloque, pero se puso en línea en lugar) y algunos otros ( list-item, table, table-row, table-cell, flex, etc).

Cuando establece un elemento en, display: blockpero también lo establece visibility: hidden, el navegador aún lo trata como un elemento de bloque, excepto que simplemente no lo ve. Algo así como apilar una caja roja encima de una caja invisible: la caja roja parece flotar en el aire cuando en realidad está encima de una caja física que no se puede ver.

En otras palabras, esto significa que los elementos displayque no nonelo son todavía afectarán el flujo de elementos en una página, independientemente de si son visibles o no. Los cuadros que rodean un elemento con display: nonese comportarán como si ese elemento nunca hubiera estado allí (aunque permanece en el DOM).

visibilidad: oculta;

• el elemento no se pintará Y no recibirá eventos de clic / toque, pero el espacio que ocupa todavía está ocupado
• debido a que todavía está allí para propósitos de diseño, puede medirlo sin que sea visible
• cambiar el contenido aún costará tiempo para redistribuir / diseñar la página
• la visibilidad se hereda, por lo que esto significa que puede hacer visibles a los subhijos dándoles visibilidad: visible;

pantalla: ninguna;

• hará que el elemento no participe en el flujo / diseño
• puede (dependiendo del navegador utilizado) eliminar películas Flash e iframes (que se reiniciarán / recargarán al mostrarse nuevamente), aunque puede evitar que esto suceda con iframes
• el elemento no ocupará ningún espacio. para propósitos de diseño, es como si no existiera
• hará que algunos navegadores / dispositivos (como el iPad) recuperen directamente la memoria utilizada por ese elemento, lo que provocará pequeñas interrupciones si cambia entre ningún valor y otro durante las animaciones

notas adicionales:

• imágenes en contenido oculto: en todos los navegadores populares las imágenes siguen cargadas, aunque estén dentro de cualquier elemento con visibilidad: ocultas; o mostrar: ninguno;
• fuentes en contenido oculto: los navegadores webkit (Chrome / Safari) pueden retrasar la carga de fuentes personalizadas que solo se utilizan en elementos ocultos, incluso a través de la visibilidad o la visualización. Esto puede hacer que mida elementos que todavía usan una fuente alternativa hasta que se cargue la fuente personalizada.

display: none elimina el elemento del flujo del html mientras que visibilidad: hidden no lo hace.

pantalla: ninguna; eliminará el estilo visual / espacio físico de los elementos DOM del DOM, mientras que la visibilidad: oculta; no eliminará el elemento, simplemente lo ocultará. Entonces, un div que ocupa 300px de espacio vertical en su DOM TODAVÍA ocupará 300px de ancho vertical cuando se establezca en visibilidad: oculto; pero cuando se configura para mostrar: ninguno; sus estilos visuales y el espacio que ocupa se ocultan y luego el espacio se "libera" por falta de una palabra mejor.

[EDITAR] - Hace un tiempo que escribí lo anterior, y si no estaba lo suficientemente informado o si no tenía un mal día, no lo sé, pero la realidad es que el elemento NUNCA se elimina de la jerarquía DOM. Todos los 'estilos' de visualización de nivel de bloque están completamente 'ocultos' cuando se utiliza display: none, mientras que con visibilidad: hidden; el elemento en sí está oculto pero aún ocupa un espacio visual en el DOM. Espero que esto aclare las cosas