¿Cuál es la forma correcta de ocultar una etiqueta HTML?

Question

¿Qué es CSS correcto para ocultar cualquier HTML. Ejemplo- Como la etiqueta <div>. que utilizo para hacer esto:

div {display:none; visibility:hidden;} 

¿El CSS compatible con todos los principales navegadores de ocultar que div. Especialmente es compatible con I.E.

Answer 1

Tanto display:none y visibility:hidden son universalmente soportado por los navegadores CSS habilitado, por lo que sólo los generales CSS caveat s aplican. El efecto es diferente: display:none hace que el documento se represente como si el elemento no estuviera allí, mientras que visibility:hidden significa que el elemento se procesará debidamente al formatear el documento, ocupando normalmente un espacio, pero eliminado de la vista como si se volvieron completamente transparentes.

El que uses depende de tu objetivo de ocultar un elemento. Por ejemplo, si dinámicamente (con un script del lado del cliente) apaga o enciende algún contenido, entonces visibility:hidden puede ser mejor ya que no causa un redibujado de otro contenido.

El uso de ambos es normalmente sin sentido, como se hace display:nonevisibility:hidden irrelevante (aunque en la cascada, puede ocurrir que la configuración de estas propiedades pueden ser anulados por otras hojas de estilo, y luego display:none pueden perder efecto).

Answer 2

Ni siquiera necesita visibility:hidden;.

div { 
    display:none; 
} 

Lo anterior debe ser suficiente. Y funciona en todos los navegadores. Oculta el elemento completamente, como en, ya no tendrá una influencia en el diseño de la página.

Answer 3

display : none; es lo suficientemente apartado y el estándar de hacer esto

Answer 4

Uso visibility: hidden; si todavía quiere el elemento para ocupar espacio en el diseño de la página. Por ejemplo:

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

seguirá viendo 100px entre las dos piezas de texto, pero no se va a ver el contenido dentro de la div.

usando:

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

No habrá espacio entre los dos elementos de texto, como el div no afectará a la disposición en absoluto.

Ambos son compatibles con cualquier navegador moderno que pueda imaginar.

Answer 5

En HTML5 hay un nuevo atributo global llamado hidden.

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

El atributo global oculta es un atributo booleano que indica que el elemento no es todavía, o ya no es, relevante.Por ejemplo, se puede utilizar para ocultar los elementos de la página que no se puede utilizar hasta que el proceso de inicio de sesión se ha completado. Los navegadores no representarán elementos con el conjunto de atributos ocultos.

Tenga en cuenta que hidden tiene un significado semántico en comparación con display y visibility. Es por eso que no es un atributo CSS, sino un atributo HTML.