¿Cuál es la diferencia entre el atributo oculto (HTML5) y la regla de visualización: ninguna (CSS)?

110

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 display:noneregla, 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 tener en cuenta sobre cuándo usar uno u otro?

TIA.

EDITAR : Basado en las respuestas de @ newtron (abajo), hice más búsquedas. El hiddenatributo fue muy disputado el año pasado y (aparentemente) apenas se incorporó a la especificación 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 me dirijo solo a navegadores web, no hay diferencia. (Una página incluso afirmó que los navegadores web solían display:noneimplementar el atributo oculto). Pero si estoy considerando la accesibilidad (por ejemplo, tal vez espero que los lectores de pantalla lean mi contenido), entonces hay una diferencia. La regla CSS display:nonepuede ocultar mi contenido de los navegadores web, pero una regla aria correspondiente (p. Ej.,aria-hidden="false") podría intentar leerlo. Por lo tanto, ahora estoy de acuerdo en que la respuesta de @newtron es correcta, aunque quizás (posiblemente) no es tan clara como me gustaría. Gracias @newtron por tu ayuda.

css html visibility james.garriss
fuente

Ni siquiera sabía que hiddenexiste el atributo, pero ciertamente es una buena pregunta ya que parece violar la separación de estructura / presentación.

Waldheinz

Para aquellos que aún no han tenido el placer de leer la especificación HTML5 sobre este atributo: w3.org/TR/html5/editing.html#the-hidden-attribute

james.garriss

w3.org/html/wg/wiki/ChangeProposals/removehidden

Yiğit Yener

Lea eso ya, @Yigit. También tiene más de un año. Y aún está escondido en la especificación. Eso me indicaría que la propuesta no ha ganado ningún adepto.

james.garriss

Gracias por editar. ¡Lo siento, no estaba claro! La información que agregaste arriba es excelente. +1

newtron

Respuestas:

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

El atributo oculto no debe usarse para ocultar contenido que podría mostrarse legítimamente en otra presentación. Por ejemplo, es incorrecto utilizar oculto para ocultar paneles en un cuadro de diálogo con pestañas, porque la interfaz con pestañas es simplemente una especie de presentación de desbordamiento; uno podría igualmente 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, se oculta en todas las presentaciones, incluidos, por ejemplo, los lectores de pantalla.

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

Dado que CSS puede apuntar a diferentes tipos de medios / presentaciones, display: nonedependerá de una presentación determinada. Por ejemplo, algunos elementos pueden tener display: nonecuando se ven en un navegador de escritorio, pero no un navegador móvil. O estar oculto visualmente pero aún disponible para un lector de pantalla.

newtron
fuente

Entonces, ¿estás diciendo que los triunfos ocultos se muestran? Si es así, está diciendo que su propósito es simplemente anular la presentación. Hmmm.

james.garriss

Supongo que sí, se muestran los triunfos ocultos. pero, en realidad, no he experimentado con él. Parecería bastante inútil si el CSS pudiera anularlo.

newtron

La semántica gana. Si no debería estar allí, elimínelo del flujo de documentos en el nivel de documentos. Si debería ser parte del flujo de documentos, pero en ciertos casos no desea que sea parte de la experiencia visual, manipúlelo en la capa cosmética. Tenga en cuenta que algunos agentes intentan analizar CSS y si determinan que algo no SERÁ VISTO, no lo muestran en absoluto. Creo que este es un comportamiento aberrante, pero saberlo puede ayudar.

Relacionado con algunos de los comentarios aquí (@ james-garris, @newtron), de acuerdo con developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… , la visualización realmente triunfa oculta - vaya figura :-)

Jurko Gospodnetić

Una diferencia importante que detecté en la página MDN para el atributo oculto: "Cambiar el valor de la propiedad de visualización de CSS en un elemento con el atributo oculto anula el comportamiento. Por ejemplo, los elementos con estilo display: flex se mostrarán a pesar de la presencia del atributo oculto".

mohsinulhaq