<display-box>

Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

Syntaxe

contents

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.

Syntaxe formelle

<display-box> = 
  contents  |
  none

Exemples

display: none

CSS

css
p.secret {
  display: none;
}

HTML

html
<p>Texte visible</p>
<p class="secret">Texte invisible</p>

Résultat

display: contents

Dans cet exemple, l'élément <div> externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec display: contents et l'élément <div> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

CSS

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

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

HTML

html
<div class="outer">
  <div>Inner div.</div>
</div>

Résultat

Accessibilité

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.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi