Letype de donnéesCSS<display-box> définit si un élément génère des boîtes d'affichage ou aucune.

Syntaxe

Valeurs valides pour<display-box> :

contents

Ces éléments ne produisent pas de boîte spécifique par eux-mêmes. Ils sont remplacés par leur pseudo-boîte et les boîtes de leurs enfants. Veuillez noter que la spécification CSS Display Level 3 définit comment la valeurcontents doit affecter les « éléments inhabituels » — des éléments qui ne sont pas rendus uniquement selon les concepts de boîte CSS, comme les éléments remplacés. VoirAppendice B : Effets dedisplay: contents sur les éléments inhabituels^(angl.) pour plus de détails.

En raison d'un bogue dans les navigateurs, cela retire actuellement l'élément de l'arbre d'accessibilité : les lecteurs d'écran n'annonceront pas ce qu'il contient. Voir la sectionAccessibilité ci-dessous pour plus de détails.

none

Désactive l'affichage d'un élément de sorte qu'il n'ait aucun effet sur la mise en page (le document est rendu comme si l'élément n'existait pas). Tous les éléments descendants voient aussi leur affichage désactivé.Pour qu'un élément occupe l'espace qu'il prendrait normalement sans rien afficher, utilisez plutôt la propriétévisibility.

Accessibilité

Via leur implémentation, la plupart des navigation retireront un élément del'arbre d'accessibilité si celui-ci reçoitdisplay: 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 selonla spécification CSSWG.

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

Syntaxe formelle

<display-box> =
contents|
none

Exemples

display: none

HTML

<p>Texte visible</p><p>Texte invisible</p>

CSS

p.secret {  display: none;}

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é avecdisplay: 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é.

HTML

<div>  <div>div intérieur.</div></div>

CSS

.outer {  border: 2px solid red;  width: 300px;  display: contents;}.outer > div {  border: 1px solid green;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les types de données de la propriétédisplay :

  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-legacy>

• display: contents n'est pas un outil de réinitialisation CSS^(angl.)

• Un balisage plus accessible avecdisplay: contents^(angl.) par Hidde de Vries (2018)