subrayado - Propiedades de CSS: visualización frente a visibilidad

text-decoration-style (4)

pantalla: ninguna elimina el elemento del flujo del html mientras que visibilidad: oculta no.

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

pantalla: ninguna; eliminará el estilo visual / espacio físico de los elementos DOM del DOM, mientras que visibilidad: oculta; no eliminará el elemento, sino que simplemente lo ocultará. Entonces un div que ocupa 300px de espacio vertical en tu DOM TODAVÍA ocupará 300px de ancho vertical cuando se establece en visibility: hidden; pero cuando está configurado para mostrar: ninguno; sus estilos visuales y el espacio que ocupa están ocultos y el espacio se "libera" por falta de una palabra mejor.

[EDITAR] - Hace un tiempo escribí lo anterior, y si no tenía suficiente conocimiento o tuve 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 usa display: ninguno, mientras que con visibilidad: oculta; el elemento en sí está oculto, pero aún ocupa un espacio visual en el DOM. Espero que esto aclare las cosas

visibilidad: oculta;

el elemento no se pintará Y no recibe eventos de clic / toque, pero el espacio que ocupa aún está ocupado
porque todavía está ahí para propósitos de diseño, puedes medirlo sin que sea visible
el cambio de contenido aún le costará tiempo de reflujo / diseño de la página
la visibilidad se hereda, por lo que puede hacer visibles a los sub-hijos dándoles visibilidad: visible;

pantalla: ninguna;

hará que el elemento no participe del flujo / diseño
puede (según el navegador utilizado) eliminar películas Flash y marcos flotantes (que se reiniciarán / volverán a cargar al volver a mostrarse), aunque puede evitar que esto suceda con los marcos flotantes
el elemento no ocupará ningún espacio. para fines de diseño es como si no existiera
hará que algunos navegadores / dispositivos (como el iPad) recuperen directamente la memoria utilizada por ese elemento, causando pequeños saltos si cambia entre ninguno y otro valor durante las animaciones

notas adicionales:

imágenes en contenido oculto: en todos los buscadores populares, las imágenes aún se cargan, aunque se encuentren dentro de cualquier elemento con visibilidad: oculto; o pantalla: ninguna;
fuentes en contenido oculto: 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 aún usan una fuente de respaldo hasta que se cargue la fuente personalizada.

La propiedad de visibility solo le dice al navegador si debe mostrar un elemento o no. Es visible ( visible , puedes verlo) o invisible ( hidden , no puedes verla).

La propiedad de display le dice al navegador cómo dibujar y mostrar un elemento, si es que debe mostrarse como un elemento en inline (es decir, fluye con texto y otros elementos en línea) o un elemento de nivel de block (es decir, tiene altura y propiedades de ancho que puede establecer, es flotante, etc.), o un inline-block (es decir, actúa como un cuadro de bloque pero en su lugar está en línea) y algunos otros ( list-item , table , table-row table-cell , table-cell , flex , etc.)

Cuando configura un elemento para display: block pero también establecer visibility: hidden , el navegador todavía lo trata como un elemento de bloque, excepto que simplemente no lo ve. Algo así como cómo 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 puedes ver.

En otras palabras, esto significa que los elementos con display que no es none seguirán afectando el flujo de elementos en una página, independientemente de si son visibles o no. Cajas que rodean un elemento con display: none se comportará como si ese elemento nunca estuviera allí (aunque permanece en el DOM).