<display-box>

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 valeur contents 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. Voir Appendice B : Effets de display: 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 section Accessibilité 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 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 ^(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 class="secret">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é 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é.

HTML

<div class="outer">
  <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 avec display: contents ^(angl.) par Hidde de Vries (2018)