web-dev-qa-db-fra.com

Quelle est la différence entre l'attribut caché (HTML5) et l'affichage: aucune règle (CSS)?

HTML5 a un nouvel attribut global, hidden, qui peut être utilisé pour masquer le contenu.

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

CSS a le display:none règle, qui peut également être utilisée pour masquer le contenu.

article { display:none; }

Visuellement, ils sont identiques. Quelle est la différence sémantiquement? Sur le plan informatique?

Quelles directives dois-je prendre en compte quand utiliser l'un ou l'autre?

TIA.

MODIFIER : Sur la base des réponses de @ newtron (ci-dessous), j'ai fait plus de recherches. L'attribut hidden a été vivement contesté l'année dernière et (apparemment) à peine entré dans la spécification HTML5. Certains ont fait valoir qu'il était redondant et n'avait aucun but. D'après ce que je peux dire, l'évaluation finale est la suivante: si je ne cible que les navigateurs Web, il n'y a pas de différence. (Une page a même affirmé que les navigateurs Web utilisaient display:none pour implémenter l'attribut caché.) Mais si je considère l'accessibilité (par exemple, je m'attends peut-être à ce que mon contenu soit lu par des lecteurs d'écran), alors il y a une différence. La règle CSS display:none peut masquer mon contenu des navigateurs Web, mais une règle aria correspondante (par exemple, aria-hidden="false") pourrait essayer de le lire. Ainsi, je suis maintenant d'accord pour dire que la réponse de @ newtron est correcte, mais peut-être (sans doute) pas aussi claire que je le souhaiterais. Merci @newtron pour votre aide.

htmlcsshtml5visibility
102
james.garriss

La principale différence semble être que les éléments hidden sont toujours masqués quelle que soit la présentation:

L'attribut caché ne doit pas être utilisé pour masquer le contenu qui pourrait légitimement être affiché dans une autre présentation. Par exemple, il est incorrect d'utiliser caché pour masquer les panneaux dans une boîte de dialogue à onglets, car l'interface à onglets est simplement une sorte de présentation de débordement - on pourrait tout aussi bien afficher tous les contrôles de formulaire dans une grande page avec une barre de défilement. Il est également incorrect d'utiliser cet attribut pour masquer le contenu d'une seule présentation - si quelque chose est marqué comme caché, il est masqué de toutes les présentations, y compris, par exemple, les lecteurs d'écran.

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

Étant donné que CSS peut cibler différents types de supports/présentations, display: none dépendra d'une présentation donnée. Par exemple. certains éléments peuvent avoir display: none lorsqu'il est affiché dans un navigateur de bureau, mais pas dans un navigateur mobile. Ou, soyez caché visuellement mais toujours disponible pour un lecteur d'écran.

57
newtron