contents Expérimental

L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur contents affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.

À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec display: contents sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran*.*

none

Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé. Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété visibility.

 = 
  contents  |
  none      

CSS

p.secret {
  display: none;
}

HTML

Texte visible
Texte invisible

Résultat

Dans cet exemple, l'élément

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

  
Inner div.

Via leur implémentation, la plupart des navigation retireront un élément de l'arbre d'accessibilité si celui-ci reçoit display: contents. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon la spécification CSSWG.

• Améliorer l'accessibilité du contenu avec display: contents, par Hidde de Vries (en anglais)
• display: contents n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)

• display

• display: contents n'est pas un outil de réinitialisation CSS (en anglais)

• Un balisage plus accessible avec display: contents (en anglais)