Quelle est la différence entre l'attribut hidden (HTML5) et la règle display:none (CSS) ?

Question

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

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

Le CSS dispose de la display:none qui peut également être utilisée pour masquer du contenu.

article { display:none; }

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

Quelles sont les lignes directrices à prendre en compte pour savoir quand utiliser l'un ou l'autre ?

TIA.

EDITAR : En me basant sur les réponses de @newtron (ci-dessous), j'ai fait plus de recherches. Les hidden a fait l'objet d'une vive controverse l'année dernière et a (apparemment) à peine été intégré dans la spécification HTML5. Certains ont affirmé qu'il était redondant et qu'il n'avait pas d'utilité. D'après ce que je peux dire, l'évaluation finale est la suivante : Si je vise uniquement les navigateurs web, il n'y a pas de différence. (Une page affirmait même que les navigateurs web utilisaient le format display:none pour mettre en œuvre l'attribut caché). Mais si je tiens compte de l'accessibilité (par exemple, si je souhaite que mon contenu soit lu par des lecteurs d'écran), il y a une différence. La règle CSS display:none peut cacher mon contenu aux navigateurs web, mais une règle aria correspondante (par ex, aria-hidden="false" ) pourrait essayer de le lire. Je suis donc d'accord pour dire que la réponse de @newtron est correcte, même si elle n'est peut-être (sans doute) pas aussi claire que je le souhaiterais. Merci @newtron pour votre aide.

Answer 1

La principale différence semble être que hidden sont toujours cachés, quelle que soit la présentation :

L'attribut hidden ne doit pas être utilisé pour masquer un contenu qui pourrait légitimement être affiché dans une autre présentation. Par exemple, il n'est pas correct d'utiliser hidden pour cacher des panneaux dans une boîte de dialogue à onglets, car l'interface à onglets n'est qu'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. De même, il n'est pas correct d'utiliser cet attribut pour masquer le contenu d'une seule présentation - si quelque chose est marqué comme caché, il est caché pour toutes les présentations, y compris, par exemple, pour les lecteurs d'écran.

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

Puisque CSS peut cibler différents types de médias/présentations, display: none dépendra de la 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 encore, être caché visuellement mais toujours disponible pour un lecteur d'écran.

Answer 2

Une règle simple :

Cachez-vous quelque chose parce que cela ne fait pas encore partie du contenu sémantique de la page, comme une série de messages d'erreur potentiels qui n'ont pas encore été déclenchés ? Utiliser hidden .

Cachez-vous quelque chose qui fait partie du contenu de la page, par exemple en faisant basculer un paragraphe dans un état réduit pour éviter l'encombrement ? Utiliser display:none .

hidden concerne la sémantique (si un élément fait actuellement partie du contenu de la page) et display: none concerne la présentation du contenu de la page.

Malheureusement, hidden n'aura PAS la priorité sur les display CSS, même s'il est intuitivement logique que ce qui ne fait pas partie de la page ne soit jamais affiché. Si vous souhaitez que les hidden pour être respecté, ajoutez cette règle css : [hidden] { display: none !important }

Exemples :

1. Utilisation hidden pour un message de remerciement qui ne doit pas faire partie de la page tant qu'un formulaire n'a pas été rempli.

2. Utilisation hidden pour une série de messages d'erreur potentiels qui pourraient être affichés à l'utilisateur en fonction de ses actions sur la page. Ces erreurs ne font pas partie sémantiquement du contenu de la page tant qu'une erreur ne s'est pas produite.

3. Utilisation display: none pour la navigation qui n'apparaît que lorsque l'utilisateur survole ou clique sur un bouton de menu.

4. Utilisation display: none pour les volets à onglets, dont la seule raison d'être est qu'il serait trop fastidieux d'afficher simultanément tous les volets à l'utilisateur. (Si l'utilisateur disposait d'un écran suffisamment large, tous les volets pourraient être affichés. Par conséquent, les volets ont toujours fait partie du contenu de la page, et la logique de présentation CSS est donc le choix approprié).

5. Utilisation display: none pour réduire un paragraphe ou une section dans un document. Cela indique que le paragraphe fait toujours partie du contenu de la page, mais que nous l'avons caché pour faciliter la tâche de l'utilisateur.

Note : Les dispositifs d'accessibilité gagneraient à connaître la différence entre la navigation ou le contenu qui est présent mais non affiché, et le contenu qui n'est pas considéré comme faisant partie de la page et qui ne devrait donc jamais être décrit à l'utilisateur.

Answer 3

Quelle est la différence entre le hidden (HTML5) et l'attribut display:none (CSS) ?

MDN le confirme :

Modification de la valeur du CSS display sur un élément avec la propriété hidden remplace le comportement.

Et nous pouvons le démontrer directement :

.hidden {
  display:none;
}

.not-hidden {
  display: block
}

<p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

Cela révèle qu'il y a aucune différence de présentation entre :

• a) <p hidden>
• b) <p class="hidden"> donde .hidden {display: none;}

Donc... hidden et class="hidden" sont interchangeables, n'est-ce pas ?

C'est faux.

---

Ajouter l'accessibilité :

La présentation visuelle n'est pas le seul élément à prendre en compte. Nous devrions également tous nous occuper des lecteurs d'écran maximiser l'accessibilité (n'est-ce pas ?), de sorte que la deuxième option ci-dessus devrait, plus correctement, ressembler à ceci :

• b) <p class="hidden" aria-hidden="true"> donde .hidden {display: none;}

---

Pourquoi l'utilisation d'un class="hidden" et aria-hidden="true" mieux que d'utiliser hidden ?

Parce que nous savoir que le CSS peut être ignoré en utilisant soit la cascade, soit la spécificité, et nous savoir que aria-hidden s'adresse aux agents d'accessibilité tels que les lecteurs d'écran.

En revanche, la norme HTML5 hidden est beaucoup plus vague. Il ne dit pas explicitement ce qu'il fait ou ne fait pas - et, pire encore, il semble suggérer qu'il fait des choses qu'il ne fait pas en réalité.

Voir : https://meowni.ca/hidden.is.a.lie.html

---

Note finale :

Quelle que soit la combinaison de HTML, CSS et ARIA que vous choisirez, notez-le :

Nous disposons déjà de 6 méthodes pour masquer le contenu avec différents différents.

1. display: none;
2. visibility: hidden; (ne se montrent pas, mais gardent l'espace)
3. opacity: 0;
4. width: 0; height: 0;
5. aria-hidden="true"
6. et dans le cas des données de formulaire, input type="hidden"

Source : https://davidwalsh.name/html5-hidden#comment-501242

Answer 4

Je suis en train de lire des articles sur les composants Web où la propriété HIDDEN est utilisée dans plusieurs exemples. Il semble que le fait de modifier DISPLAY:NONE [ou un autre paramètre] fasse sortir un élément de l'état HIDDEN, sauf pour un navigateur qui n'implémente pas HIDDEN - devinez quel navigateur majeur, dans sa dernière version 10, ne prend pas en charge HIDDEN ?

Answer 5

Ces deux options cachent un élément, mais la différence est liée à la mise en page. Avec display:none, un élément sera affiché comme s'il n'y avait rien, mais lorsqu'il s'agit de visibility : hidden, un élément est également caché, mais cela affecte la mise en page.