Risposte:
display:nonesignifica che il tag in questione non apparirà affatto sulla pagina (anche se puoi ancora interagire con esso attraverso la dom). Non ci sarà spazio allocato per esso tra gli altri tag.
visibility:hiddensignifica che a differenza display:nonedel tag non è visibile, ma lo spazio è allocato per esso sulla pagina. Il tag è reso, semplicemente non è visibile sulla pagina.
Per esempio:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | testSostituzione [style-tag-value]con display:nonerisultati in:
test | | testSostituzione [style-tag-value]con visibility:hiddenrisultati in:
test | | testvisibility: hiddene display: nonesarà altrettanto performante dal momento che entrambi ritroveranno layout, pittura e composito. Tuttavia, opacity: 0è funzionalmente equivalente visibility: hiddene non riattiva il passaggio del layout, quindi consiglierei di usarlo se non ti dispiace lo spazio vuoto ancora assegnato (altrimenti usa display: none).
opacity: 0dovrebbe essere usato con cautela quando si tratta di input o pulsanti, poiché esisterebbero comunque e potrebbero causare strane interazioni con l'utente.
Non sono sinonimi.
display:none rimuove l'elemento dal normale flusso della pagina, consentendo la compilazione di altri elementi.
visibility:hidden lascia l'elemento nel normale flusso della pagina in modo che occupi ancora spazio.
Immagina di essere in fila per un giro in un parco di divertimenti e qualcuno nella fila diventa così turbolento che la sicurezza li coglie dalla linea. Tutti in linea si sposteranno quindi in avanti di una posizione per riempire lo slot ora vuoto. Questo è come display:none.
In contrasto con la situazione simile, ma che qualcuno di fronte a te indossa un mantello dell'invisibilità. Durante la visualizzazione della linea, sembrerà che ci sia uno spazio vuoto, ma le persone non possono davvero riempire quello spazio vuoto perché qualcuno è ancora lì. Questo è come visibility:hidden.
Una cosa che vale la pena aggiungere, sebbene non sia stata chiesta, è che esiste una terza opzione per rendere l'oggetto completamente trasparente. Prendere in considerazione:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.(Assicurati di fare clic sul pulsante "Esegui snippet di codice" sopra per vedere il risultato.)
La differenza tra 1 e 2 è già stata evidenziata (vale a dire, 2 occupa ancora spazio). Tuttavia, c'è una differenza tra 2 e 3: nel caso 3, il mouse passerà comunque alla mano quando passa il mouse sopra il collegamento e l'utente può ancora fare clic sul collegamento e gli eventi Javascript verranno comunque attivati sul collegamento. Questo di solito non è il comportamento desiderato (ma forse a volte lo è?).
Un'altra differenza è se si seleziona il testo, quindi si copia / incolla come testo normale, si ottiene quanto segue:
1st link.
2nd link.
3rd unseen link.
Nel caso 3 il testo viene copiato. Forse questo sarebbe utile per qualche tipo di filigrana, o se volessi nascondere un avviso sul copyright che verrebbe visualizzato se un utente incautamente copia / incolla i tuoi contenuti?
C'è una grande differenza quando si tratta di nodi figlio. Ad esempio: se si dispone di un div padre e un div figlio nidificato. Quindi se scrivi così:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
In questo caso, nessuno dei div sarà visibile. Ma se scrivi così:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
Quindi il div figlio sarà visibile mentre il div genitore non verrà mostrato.
display: none rimuove completamente l'elemento dalla pagina e la pagina viene creata come se l'elemento non ci fosse affatto.
Visibility: hidden lascia lo spazio nel flusso del documento anche se non puoi più vederlo.
Questo può o meno fare una grande differenza a seconda di cosa stai facendo.
Con visibility:hiddenl'oggetto occupa ancora altezza verticale sulla pagina. Con display:noneesso è completamente rimosso. Se hai del testo sotto un'immagine e lo fai display:none, quel testo si sposterà verso l'alto per riempire lo spazio in cui era l'immagine. Se fai visibilità: nascosto il testo rimarrà nella stessa posizione.
display:nonenasconderà l'elemento e collasserà lo spazio che stava occupando, mentre visibility:hiddennasconderà l'elemento e preserverà lo spazio degli elementi. display: nessuna influenza anche alcune delle proprietà disponibili da JavaScript nelle versioni precedenti di IE e Safari.
Oltre a tutte le altre risposte, c'è una differenza importante per IE8: se usi display:nonee provi a ottenere la larghezza o l'altezza dell'elemento, IE8 restituisce 0 (mentre altri browser restituiranno le dimensioni effettive). IE8 restituisce la larghezza o l'altezza corretta solo per visibility:hidden.
display: none; Non sarà disponibile nella pagina e non occupa spazio.
visibility: hidden; nasconde un elemento, ma occuperà comunque lo stesso spazio di prima. L'elemento sarà nascosto, ma influirà comunque sul layout.
visibility: hiddenpreservare lo spazio, mentre display: nonenon preserva lo spazio.
Visualizza nessuno Esempio: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Esempio di visibilità nascosta: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Se la proprietà di visibilità è impostata su "hidden", il browser occuperà comunque spazio sulla pagina per il contenuto anche se è invisibile.
Ma quando impostiamo un oggetto su "display:none", il browser non alloca spazio sulla pagina per il suo contenuto.
Esempio:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>Un'altra differenza è che visibility:hiddenfunziona con browser molto, molto vecchi e display:nonenon:
La differenza va oltre lo stile e si riflette nel modo in cui gli elementi si comportano quando vengono manipolati con JavaScript.
Effetti ed effetti collaterali di display: none:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), tutto il ritorno 0s.Effetti ed effetti collaterali di visibility: hidden:
innerText(ma non innerHTML) dell'elemento target e dei discendenti restituisce una stringa vuota.display:none;non visualizzerà l'elemento né assegnerà spazio per l'elemento sulla pagina, mentre visibility:hidden;non visualizzerà l'elemento sulla pagina ma assegnerà spazio sulla pagina. In entrambi i casi possiamo accedere all'elemento in DOM. Per capirlo in modo migliore, si prega di guardare il seguente codice:
display: nessuno vs visibilità: nascosto
Ci sono molte risposte dettagliate qui, ma ho pensato di aggiungere questo per affrontare l'accessibilità poiché ci sono implicazioni.
display: none;e visibility: hidden;potrebbe non essere letto da tutti i software di lettura dello schermo. Tieni presente ciò che sperimenteranno gli utenti ipovedenti.
La domanda pone anche dei sinonimi. text-indent: -9999px;è un altro che è approssimativamente equivalente. La differenza importante text-indentè che verrà spesso letto dagli screen reader. Può essere un po 'una brutta esperienza in quanto gli utenti possono ancora accedere al collegamento.
Per l'accessibilità, quello che vedo oggi usato è una combinazione di stili per nascondere un elemento pur essendo visibile agli screen reader.
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}Una buona pratica è quella di creare un collegamento "Passa al contenuto" all'ancoraggio del corpo principale del contenuto. Gli utenti ipovedenti probabilmente non vogliono ascoltare l'intero albero di navigazione su ogni singola pagina. Rendi il collegamento visivamente nascosto. Gli utenti possono semplicemente toccare la scheda per accedere al collegamento.
Per ulteriori informazioni sull'accessibilità e sul contenuto nascosto, vedere: