display

La propriété display définit le type d'affichage utilisée pour le rendu d'un élément (de bloc ou en ligne) et la disposition utilisée pour ses éléments fils : grille ou boîtes flexibles.

Le type d'affichage donné par display possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au flux et le type d'affichage intérieur qui définit l'organisation des éléments enfants.

Certaines valeurs de display sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.

Syntaxe

css
/* Valeurs de type <display-outside> */
display: block;
display: inline;
display: run-in;

/* Valeurs de type <display-inside> */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* Combinaison de valeurs */
/* <display-outside> et <display-inside> */
display: block flow;
display: inline table;
display: flex run-in;

/* Valeurs de type <display-listitem> */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* Valeurs de type <display-internal> */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* Valeurs de type <display-box> */
display: contents;
display: none;

/* Valeurs de type <display-legacy> */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Valeurs globales */
display: inherit;
display: initial;
display: unset;

La propriété display est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.

<display-outside>

Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.

<display-inside>

Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).

<display-listitem>

L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.

<display-internal>

Certains modes de dispositions, tels que table et ruby possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.

<display-box>

Ces valeurs définissent si un élément génère une boîte ou non.

<display-legacy>

CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété display et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.

Valeurs historiques de display

La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété display afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.

Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :

css
.container {
  display: inline flex;
}

On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.

css
.container {
  display: inline-flex;
}

Définition formelle

Valeur initialeinline
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme la valeur spécifiée, excepté pour les éléments positionnés et flottants, ainsi que pour l'élément racine. Dans les deux cas, la valeur calculée peut être un mot clé différent de celui spécifié.
Type d'animationDiscrete behavior except when animating to or from none is visible for the entire duration

Syntaxe formelle

display = 
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy> |
<display-outside> || [ <display-inside> | math ]

<display-outside> =
block |
inline |
run-in

<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby

<display-listitem> =
<display-outside>? &&
[ flow | flow-root ]? &&
list-item

<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption |
ruby-base |
ruby-text |
ruby-base-container |
ruby-text-container

<display-box> =
contents |
none

<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid

Exemples

En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :

HTML

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

CSS

css
p.secret {
  display: none;
}

Résultat

Accessibilité

display: none;

Utiliser la propriété display avec la valeur none sur un élément entraînera son retrait de l'arbre d'accessibilité. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.

Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser une combinaison de propriétés afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.

display: contents;

Tout élément ciblé avec display: contents sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon la spécification CSSWG.

Les tableaux

Modifier la valeur de display pour un élément de tableau afin d'utiliser la valeur block, grid ou flex modifiera sa représentation au sein de l'arbre d'accessibilité. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.

Spécifications

Specification
CSS Display Module Level 3
# the-display-properties

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi