ejemplos - ¿Cuál es la diferencia entre el atributo oculto(HTML5) y la pantalla: ninguna regla(CSS)?

visibility javascript

Question

HTML5 tiene un nuevo atributo global, hidden , que se puede utilizar para ocultar contenido.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS tiene la regla display:none , que también se puede usar para ocultar contenido.

article { display:none; }

Visualmente, son idénticos. ¿Cuál es la diferencia semánticamente? Computacionalmente?

¿Qué pautas debo considerar sobre cuándo usar una u otra?

TIA.

EDITAR : Basado en las respuestas de @ newtron (abajo), hice más búsquedas. El atributo hidden fue duramente disputado el año pasado y (al parecer) apenas llegó a las especificaciones de HTML5. Algunos argumentaron que era redundante y no tenía ningún propósito. Por lo que puedo decir, la evaluación final es la siguiente: si estoy apuntando solo a navegadores web, no hay diferencia. (Una página incluso afirmó que los navegadores web utilizados display:none para implementar el atributo oculto). Pero si estoy considerando la accesibilidad (por ejemplo, tal vez espero que mi contenido sea leído por lectores de pantalla), entonces hay una diferencia. La display:none regla CSS display:none puede ocultar mi contenido de los navegadores web, pero una regla aria correspondiente (por ejemplo, aria-hidden="false" ) podría intentar leerla. Por lo tanto, ahora estoy de acuerdo en que la respuesta de @ newtron es correcta, aunque quizás (posiblemente) no sea tan clara como me gustaría. Gracias @newtron por tu ayuda.

Answer 1

La diferencia clave parece ser que hidden elementos ocultos siempre están ocultos independientemente de la presentación:

El atributo oculto no se debe usar para ocultar contenido que podría mostrarse legítimamente en otra presentación. Por ejemplo, es incorrecto usar ocultos para ocultar paneles en un cuadro de diálogo con pestañas, porque la interfaz con pestañas es simplemente un tipo de presentación de desbordamiento; también podría mostrar todos los controles de formulario en una página grande con una barra de desplazamiento. Es igualmente incorrecto utilizar este atributo para ocultar contenido solo de una presentación: si algo está marcado como oculto, está oculto para todas las presentaciones, incluidos, por ejemplo, los lectores de pantalla.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Como CSS puede apuntar a diferentes tipos de medios / presentaciones, display: none dependerá de una presentación determinada. Por ejemplo, algunos elementos pueden tener display: none cuando se ve en un navegador de escritorio, pero no en un navegador móvil. O bien, ocúltelo visualmente, pero siga estando disponible para un lector de pantalla.