Proprietà CSS: visualizzazione e visibilità

Qual è la differenza tra le proprietà di visualizzazione e di visibilità?

La visibilityproprietà dice solo al browser se mostrare o meno un elemento. È visibile ( visible- puoi vederlo) o invisibile ( hidden- non puoi vederlo).

La displayproprietà dice al browser come disegnare e mostrare un elemento, se non del tutto - se deve essere visualizzato come un inlineelemento (cioè scorre con testo e altri elementi in linea) o un blockelemento -level (cioè ha proprietà di altezza e larghezza che è possibile impostare, è galleggiante, ecc), o un inline-block(cioè si comporta come una scatola di blocco, ma è prevista in linea invece) e alcuni altri ( list-item, table, table-row, table-cell, flex, ecc).

Quando imposti un elemento su display: blockma anche impostato visibility: hidden, il browser lo tratta ancora come un elemento di blocco, tranne per il fatto che non lo vedi. Un po 'come il modo in cui impili una scatola rossa sopra una scatola invisibile: la scatola rossa sembra fluttuare a mezz'aria quando in realtà si trova sopra una scatola fisica che non puoi vedere.

In altre parole, ciò significa che gli elementi displayche non nonelo sono influenzeranno comunque il flusso degli elementi in una pagina, indipendentemente dal fatto che siano visibili o meno. I riquadri che circondano un elemento con display: nonesi comporteranno come se quell'elemento non fosse mai stato lì (sebbene rimanga nel DOM).

visibilità: nascosta;

• l'elemento non verrà dipinto E non riceverà eventi click / touch, ma lo spazio che occupa è comunque occupato
• poiché è ancora lì per scopi di layout, puoi misurarlo senza che sia visibile
• la modifica del contenuto richiederà comunque tempo per il reflow / layout della pagina
• la visibilità è ereditata, quindi questo significa che puoi rendere visibili i figli secondari dando loro visibilità: visibile;

display: nessuno;

• farà in modo che l'elemento non partecipi al flusso / layout
• può (a seconda del browser utilizzato) uccidere i filmati Flash e gli iframe (che si riavvieranno / ricaricheranno quando saranno mostrati di nuovo), sebbene tu possa impedire che ciò accada con gli iframe
• l'elemento non occuperà spazio. ai fini del layout è come se non esistesse
• farà in modo che alcuni browser / dispositivi (come l'iPad) riprendano direttamente la memoria usata da quell'elemento, causando piccoli problemi se passi da nessuno a un altro valore durante le animazioni

note extra:

• immagini in contenuto nascosto: in tutti i browser più diffusi le immagini vengono comunque caricate, anche se sono all'interno di qualsiasi elemento con visibilità: nascoste; o display: nessuno;
• caratteri in contenuti nascosti: i browser webkit (Chrome / Safari) possono ritardare il caricamento di caratteri personalizzati che vengono utilizzati solo negli elementi nascosti, anche tramite visibilità o visualizzazione. Ciò potrebbe causare la misurazione di elementi che stanno ancora utilizzando un carattere di riserva finché non viene caricato il carattere personalizzato.

display: nessuno rimuove l'elemento dal flusso dell'html mentre la visibilità: nascosto no.

display: nessuno; rimuoverà lo stile di visualizzazione / spazio fisico degli elementi DOM dal DOM, mentre la visibilità: nascosta; non rimuoverà l'elemento, ma semplicemente lo nasconderà. Quindi un div che occupa 300px di spazio verticale nel tuo DOM occuperà ANCORA 300px di larghezza verticale se impostato su visibilità: nascosto; ma se impostato per visualizzare: nessuno; i suoi stili visivi e lo spazio che occupa sono nascosti e lo spazio viene quindi "liberato" per mancanza di una parola migliore.

[EDIT] - È stato un po 'di tempo fa che ho scritto quanto sopra, e se non ero abbastanza informato o se stavo avendo una brutta giornata, non lo so, ma la realtà è che l'elemento non viene MAI rimosso dalla gerarchia DOM. Tutti gli "stili" di visualizzazione a livello di blocco sono completamente "nascosti" quando si utilizza display: nessuno, mentre con visibilità: nascosto; l'elemento stesso è nascosto ma occupa ancora uno spazio visivo nel DOM. spero che questo chiarisca le cose