<display-box>

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

Syntaxe

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.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contents
Specific behavior of unusual elements when display: contents is applied to them
Elements with display: contents are focusable
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi