Qual è il modo corretto per nascondere qualsiasi tag HTML?

Question

Che cosa è corretto CSS per nascondere qualsiasi HTML. Esempio: tag <div>. che uso per fare questo:

div {display:none; visibility:hidden;} 

fa il CSS supporta tutti i principali browser di nascondere che div. Soprattutto supporta I.E.

Answer 1

Entrambi display:none e visibility:hidden sono universalmente supportati dai browser abilitati per CSS, quindi si applicano solo i valori generali CSS caveat s. L'effetto ha un diverso effetto: display:none causa il rendering del documento come se l'elemento non fosse affatto presente, mentre visibility:hidden significa che l'elemento verrà debitamente elaborato durante la formattazione del documento, normalmente occupando dello spazio, ma rimosso dalla vista come se fosse sono stati girati completamente trasparenti.

Quale si utilizza dipende dall'obiettivo di nascondere un elemento. Ad esempio, se si attiva (con uno script sul lato client) dinamicamente o su alcuni contenuti, allora visibility:hidden può essere migliore in quanto non causa il ridisegno di altri contenuti.

Utilizzando sia normalmente è inutile, come display:none rende visibility:hidden irrilevante (anche se in cascata, potrebbe accadere che le impostazioni per queste proprietà possono essere sovrascritte da altri fogli di stile, e poi display:none possono perdere effetto).

Answer 2

Non è nemmeno necessario visibility:hidden;.

div { 
    display:none; 
} 

Quanto sopra dovrebbe essere sufficiente. E funziona su tutti i browser. Nasconde praticamente l'elemento completamente, come in, non avrà più influenza sul layout di pagina.

Answer 3

display : none; è il modo abbastanza standard e per fare questo

Answer 4

Usa visibility: hidden; se si vuole ancora l'elemento ad occupare spazio nel layout di pagina. Per esempio:

Hello 
 
<div style="visibility: hidden; height: 100px;">Hidden</div> 
 
World

si continua a vedere 100px tra le due parti di testo, ma non sarà possibile visualizzare il contenuto all'interno del div.

utilizzando:

Hello 
 
<div style="display: none; height: 100px;">Hidden</div> 
 
World​​​​​

Non ci sarà spazio tra i due elementi di testo, come il div non influenzerà il layout a tutti.

Entrambi sono supportati in qualsiasi browser moderno a cui si possa pensare.

Answer 5

In HTML5 c'è un nuovo attributo globale chiamato hidden.

Da https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden:

L'attributo globale nascosta è un attributo booleano che indica che l'elemento non è ancora, o non è più, rilevante.Ad esempio, può essere utilizzato per nascondere elementi della pagina che non possono essere utilizzati fino al completamento della procedura di accesso. I browser non renderanno gli elementi con il set di attributi nascosti.

Attenzione che hidden ha un significato semantico rispetto a display e visibility. Questo è il motivo per cui non è un attributo CSS, ma un attributo HTML.