manera adecuada para hacer elementos HTML inicialmente ocultos

estoy por años con algo como esto en mi HTML para elementos que deben ser ocultados:manera adecuada para hacer elementos HTML inicialmente ocultos

<div style="display: none"></div>

Está bien, pero no puedo soportar los estilos en línea nunca más.

ocultar elementos mediante programación en JavaScript window.onload evento es demasiado tarde - que parpadea en la pantalla.
Puedo crear la clase CSS 'oculta', pero con las agresivas estrategias de carga del navegador (como en Opera) el bloque puede aparecer por un segundo (antes de que se cargue CSS).

¿Hay alguna otra manera mejor?

Fuente

2011-08-22 artvolk

+12

Ha creado una excelente opción para usar estilos en línea. – Fosco

Pero son feos :) – artvolk

Si el "bloque puede aparecer por un segundo (antes de que se cargue CSS)" eso significaría que toda la página aparecería sin ningún estilo. ¿Eso realmente sucede en la ópera? – Kapep

Por lo que sé, el método class="hidden" es el mejor y el más utilizado. Sugiero que use class="hidden".

"pero con estrategias de carga agresivos del navegador (como en Opera), el bloque puede aparecer por un segundo (antes de cargar CSS)."

No uso Opera, pero si algún navegador cargó la página antes de aplicar estilos, entonces muchas cosas se verían mal, no solo sus elementos ocultos. No sé de ningún navegador haciendo esto.

Fuente

2011-08-22 14:01:03

Recientemente comencé a usar objetos de nodos, y este método me gusta cada vez más. De esta manera usted no tiene que utilizar elementos HTML ocultos, que acaba de colocar, por ejemplo, un ancla:

<a name="some-anchor" id="some-anchor-id" />

y luego sustituirlo por un nodo creado. De esta forma, no tendrá que preocuparse por los elementos que parpadean en la carga, porque no habrá ninguno.

Fuente

2011-08-22 14:02:12

+1 para una gran solución. –

¿Es esto también amigable para los motores de búsqueda? Si inserta todo el contenido de búsqueda de su sitio web de esta manera, es posible que los rastreadores no lo encuentren. – pimvdb

Sí, tienes razón, pero de nuevo, los motores de búsqueda solo verán el contenido inicial de bloques con 'class =" hidden "'. Si tiene algún contenido que cambia dinámicamente, de todos modos, no estará accesible para los rastreadores. –

Dependiendo de lo que sea el elemento, podría ser aceptable generar e insertar el elemento mediante javascript después de cargar la página (en lugar de ocultarlo después de la carga de la página). Solo un pensamiento, aunque no se degradaría con gracia para los usuarios sin javascript habilitado ...

Fuente

2011-08-22 14:02:30 Dan

Acerca de la degradación elegante: lo mismo ocurre con 'class =" hidden "'. Sin JS, los usuarios no obtienen nada. –

@ IgorZinov'yev pero luego tiene un margen de utilidad inútil en su HTML que no tiene nada que hacer allí. Es un código muerto. – Raynos

Ese es un buen punto. Esta es la razón por la que normalmente oculto los elementos en la carga de la página, por lo que la información se puede buscar y se puede acceder con JS deshabilitada. – Dan

Si tiene una página con solo HTML, ¿se mostrarían esos elementos?

Estos elementos se muestran para los lectores de pantalla por defecto, eso no es muy agradable o accesible, ¿verdad?

Si tiene la página HTML + CSS solamente no puede mostrar estos elementos, entonces no tiene sentido, aparte de los trucos de black hat SEO.

Si tiene una página HTML + CSS + JS, entonces hay un valor en tenerlas.

Solo tiene valor tenerlos cuando tiene habilitado JS. Esto significa que deben _existir en el javascript

Use javascript para crear estos elementos e insertarlos en el DOM.

Si construye su sitio web desde cero con HTML, HTML + CSS, HTML + CSS + JS, entonces se daría cuenta de que pertenecen a su código de JavaScript.Siéntase libre de leer más sobre Progressive Enhancement

Fuente

2011-08-22 14:04:35 Raynos

La única forma limpia de crear elementos complejos \ trozos de HTML en JS (los elementos triviales no son tan comunes) son plantillas de cliente. Las plantillas en sí mismas suelen colocarse en bloques ocultos :) – artvolk

@artvoik has olvidado el DOM. puedes crear fácilmente elementos complejos usando el DOM. – Raynos

Al crear elementos complejos, esto se hará en código JS, que es malo, porque ya no es actualizable por los diseñadores de plantillas. – artvolk

Puede definir la clase en de la página. Es ligeramente más limpio que en línea, pero tendría que tener esa definición de clase única en todas las páginas. Pero de todos modos, trataría de usar un pie de página/encabezado dinámico de todos modos.

Fuente

2011-08-22 14:05:17 zoomix

Podría agregar al estilo oculto una posición fija que lo sacaría de la ventana de un navegador. Esta puede ser una solución para evitar que el div parpadee en Opera.

Por ejemplo:

.super_hide{ 
    position:fixed; 
    top:-1000px; /* you would need to know how height the content is or put something huge*/ 
}

Con la esperanza de que esto ayude!

Fuente

2011-08-22 15:16:03

La mayoría de las veces me gustaría que el bloque oculto se muestre más adelante en el lugar donde estaba escondido ... – artvolk

Luego, puede eliminar la clase gracias a JavaScript, y así el elemento aparecerá como se supone que debe ser. –

Esto parece desencadenar el reflujo, no sé si esto será un problema, solo un pensamiento – artvolk

manera adecuada para hacer elementos HTML inicialmente ocultos

Respuesta

Cuestiones relacionadas