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

111

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 la display:nonerè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 pour savoir quand utiliser l'un ou l'autre?

TIA.

EDIT : Sur la base des réponses de @ newtron (ci-dessous), j'ai fait plus de recherches. L' hiddenattribut 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 cible uniquement les navigateurs Web, il n'y a aucune différence. (Une page a même affirmé que les navigateurs Web avaient l'habitude display:noned'implémenter l'attribut caché.) Mais si je considère l'accessibilité (par exemple, je m'attends à ce que mon contenu soit lu par des lecteurs d'écran), alors il y a une différence. La règle CSS display:nonepeut 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 que la réponse de @ newtron est correcte, bien que peut-être (sans doute) pas aussi claire que je pourrais le souhaiter. Merci @newtron pour votre aide.

css html visibility james.garriss
la source

Je ne savais même pas que l' hiddenattribut existe, mais certainement une bonne question car l'avoir semble violer la séparation structure / présentation.

Waldheinz

Pour ceux qui n'ont pas encore eu la joie de lire la spécification HTML5 sur cet attribut: w3.org/TR/html5/editing.html#the-hidden-attribute

james.garriss

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

Yiğit Yener

Lisez-le déjà, @Yigit. Il a également plus d'un an. Et caché est toujours dans les spécifications. Cela m'indiquerait que la proposition n'a gagné aucun converti.

james.garriss

Merci pour la modification. Désolé ce n'était pas clair! Les informations que vous avez ajoutées ci-dessus sont excellentes. +1

newtron

Réponses:

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

L'attribut masqué ne doit pas être utilisé pour masquer du contenu qui pourrait légitimement être affiché dans une autre présentation. Par exemple, il est incorrect d'utiliser masqué 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 également afficher tous les contrôles de formulaire dans une seule 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 masqué, 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

Puisque le CSS peut cibler différents types de médias / présentations, display: nonedépendra d'une présentation donnée. Par exemple, certains éléments peuvent être display: noneaffichés dans un navigateur de bureau, mais pas dans un navigateur mobile. Ou, être masqué visuellement mais toujours disponible pour un lecteur d'écran.

Newtron
la source

Alors vous dites que les atouts cachés s'affichent? Si tel est le cas, vous dites que son but est simplement de remplacer la présentation. Hmmm.

james.garriss

je suppose que oui, les atouts cachés s'affichent. mais, je ne l'ai pas réellement expérimenté. il semblerait plutôt inutile si le css pouvait le remplacer.

newtron

La sémantique gagne. S'il ne devrait pas être là, supprimez-le du flux de documents au niveau de la documentation. S'il doit faire partie du flux de documents, mais dans certains cas, vous ne voulez pas qu'il fasse partie de l'expérience visuelle, gérez-le au niveau de la couche cosmétique. Gardez à l'esprit que certains agents tentent d'analyser le CSS et s'ils déterminent que quelque chose ne serait pas vu, ils ne le produisent pas du tout. Je pense que c'est un comportement aberrant, mais cela peut aider à savoir.

Lié à certains des commentaires ici (@ james-garris, @newtron), selon developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/... , l'affichage l'emporte sur caché - allez comprendre :-)

Jurko Gospodnetić

Une différence importante que j'ai repérée sur la page MDN pour l'attribut masqué: "La modification de la valeur de la propriété d'affichage CSS sur un élément avec l'attribut masqué remplace le comportement. Par exemple, les éléments de style display: flex seront affichés malgré la présence de l'attribut masqué."

mohsinulhaq le