Gérer l’affichage avec la propriété CSS display

La propriété CSS display est une propriété très puissante puisqu’elle va nous permettre de modifier la façon dont un élément va s’afficher dans la page : en ligne, sous forme de bloc, etc. et donc la façon dont il va se comporter avec ses voisins.

Nous avons déjà eu l’occasion de parler de l’affichage des éléments dans la leçon expliquant les différences entre les éléments de niveau block et de niveau inline.

En CSS3, la propriété display accepte de nombreuses valeurs différentes ce qui va nous permettre de choisir précisément comment chaque élément HTML doit être affiché dans la page.

Dans cette nouvelle leçon, nous allons expliquer comment fonctionne la propriété display en détail et constater son impact sur l’affichage des éléments en utilisant ses différentes valeurs.

 

Rappels sur la définition du type d’affichage d’un élément par défaut

Le type d’affichage d’un élément va toujours être défini en CSS via la propriété display. Si cette propriété n’est pas explicitement renseignée pour un élément, la valeur par défaut de qui est display: inline sera appliquée à l’élément.

Cependant, vous devez bien comprendre que lorsque vous ouvrez une page dans un navigateur, le navigateur va appliquer des styles par défaut à chaque élément HTML afin d’améliorer le rendu et pour servir de solution de secours si des styles n’ont pas été appliqués par les développeurs de la page.

Parmi ces styles par défaut appliqués par n’importe quel navigateur (et dépendant de chaque navigateur, attention !) se trouve la définition du type d’affichage ou du display pour chaque élément.

Pour savoir quel type de display appliquer par défaut à chaque élément, la plupart des navigateurs sérieux et connus se basent sur les recommandations du W3C (ou du WHATWG, car il est souvent difficile de savoir lequel de ces deux groupes est à l’origine d’une recommandation)

Attention cependant : encore une fois, ce ne sont que des recommandations et chaque navigateur est libre de ne pas en tenir compte et de définir une autre valeur de display pour chaque élément, ce qui peut en pratique arriver pour certains éléments particuliers ou dans certaines situations peu courantes.

Ceci étant dit, nous allons maintenant apprendre à modifier nous-mêmes le type d’affichage d’un élément en utilisant la propriété display pour ne pas avoir à dépendre de l’implémentation par les différents navigateurs.

 

Inner display et outer display

Plus haut, j’ai dit que la propriété CSS display affectait la façon dont un élément s’affichait dans une page.

Plus précisément, cette propriété affecte la façon dont l’élément va générer les boites le composant. Je vous rappelle qu’en HTML5 et CSS3, tout élément HTML doit être vu comme un empilement de boites :

• Boite n°1 (la plus interne) : contenu de l’élément ;
• Boite n°2 : boite n°1 + marges internes ;
• Boite n°3 : boite n°2 + bordures ;
• Boite n°4 : boite n°3 + marges externes.

La propriété display va ainsi impacter la génération de l’outer display qui correspond au comportement de l’élément globalement (qu’on peut représenter via la boite globale ou boite n°4) dans le flux de la page et donc par rapport aux autres éléments mais également de l’inner display de l’élément qui correspond à la façon dont l’élément va créer ses boites internes (excepté pour les éléments remplacés qui sont en dehors de la portée du CSS).

Ainsi, la propriété display va toujours implicitement recevoir deux valeurs : une première pour définir l’outer display et une seconde pour définir l’inner display.

Cependant, en pratique, nous ne mentionnerons explicitement qu’une valeur cet laisserons le CSS définir la deuxième valeur par défaut. Retenez toutefois bien que la propriété display définira quand même toujours un outer display et un inner display.

Ainsi, lorsqu’on mentionne display : block par exemple, la « vraie » valeur complète de display va être display : block flow.

Dans le cas où nous voudrions une deuxième valeur autre que la valeur par défaut, nous n’aurons pas non plus besoin de préciser deux valeurs en pratique puisque le CSS a implémenté des mots clefs composés comme inline-block qui sont là pour répondre à ces cas.

Pour information, voici les versions « raccourcies » des valeurs données à display que vous devriez toujours utiliser et les valeurs complètes pour référence. Par d’inquiétude, nous allons indiquer par la suite à quoi correspond chaque valeur.

Valeur raccourcie	Valeur complète	Comportement
none	—	L’élément ne s’affiche pas et ne génère aucune boite
contents	—	L’élément ne génère aucune boite à l’affichage mais ses enfants oui
block	block flow	Elément de niveau block (block-level) et boites internes de type block (block container)
flow-root	block flow-root	Elément de niveau block (block-level) et boites internes de type block (block container) établissant un nouveau contexte de formatage
inline	inline flow	Elément de niveau inline (inline-level) et boites internes de type inline
inline-block	inline flow-root	Elément de niveau inline (inline-level) et boites internes de type block (block container)
run-in	run-in flow	Elément de type run-in (inline avec des règles spéciales)
list-item	block flow list-item	Elément block-level avec block container de type block qui crée également une boite contenant un marqueur
inline list-item	inline flow list-item	Elément inline-level qui crée également une boite contenant un marqueur
flex	block flex	Elément block-level avec boites internes flexibles (flex container)
inline-flex	inline flex	Elément inline-level avec boites internes flexibles (flex container)
table	block table	Elément block-level avec boites internes de type table
inline-table	inline table	Elément inline-level avec boites internes de type table
grid	block grid	Elément block-level avec boites internes de type grille (grid)
inline-grid	inline grid	Elément inline-level avec boites internes de type grille (grid)

 

Les valeurs de display-outside de display

Nous allons déjà pouvoir commencer par définir l’outer display d’un élément avec display, c’est-à-dire le type d’affichage de l’élément en soi et son comportement visuel par rapport aux autres.

Si on exclut les valeurs particulières display : none et display : contents, nous ne pouvons définir l’outer display d’un élément qu’avec trois valeurs différentes :

• Avec la valeur inline : l’élément va être de niveau inline ;
• Avec la valeur block : l’élément va être de niveau block ;
• Avec la valeur run-in : l’élément va être de niveau inline avec des règles particulières.

Notez que pour chacune de ces trois valeurs outer display, la valeur de l’inner display associée par défaut est flow.

Display : inline

En précisant un display : inline (qui est la valeur raccourcie de display : inline flow), on définit un élément de niveau inline (inline-level element) ou tout simplement de « type » inline. Un élément de niveau inline a les caractéristiques suivantes :

• Un élément de type inline ne va occuper que la largeur nécessaire à l’affichage de son contenu par défaut ;
• Les éléments de type inline vont venir essayer de se placer en ligne, c’est-à-dire à côté (sur la même ligne) que l’élément qui les précède dans le code HTML ;
• Un élément de type inline peut contenir d’autres éléments de type inline mais ne peut pas contenir d’éléments de type block.

See the Pen Cours HTML CSS 6.1.1 by Pierre (@pierregiraud) on CodePen.

Par défaut, les éléments p possèdent un display : block. Ici, nous définissons un display : inline pour deux d’entre eux ; ces deux paragraphes en particulier vont donc se comporter comme des éléments inline.

Display : block

En précisant un display : block (valeur raccourcie de display : block flow), on définit un élément de niveau block (block-level element) ou encore de « type » block. Un élément de niveau block va posséder les caractéristiques suivantes :

• Un élément de type block va toujours prendre toute la largeur disponible au sein de son élément parent (ou élément conteneur) ;
• Un élément de type block va toujours « aller à la ligne » (créer un saut de ligne avant et après l’élément), c’est-à-dire occuper une nouvelle ligne dans une page et ne jamais se positionner à côté d’un autre élément par défaut ;
• Un élément de type block peut contenir d’autres éléments de type block ou de type inline.

See the Pen Cours HTML CSS 6.1.2 by Pierre (@pierregiraud) on CodePen.

Les éléments strong et a ont un type d’affichage inline qui leur est attribué par défaut. Ici, nous changeons ce type d’affichage pour un display : block pour notre deuxième élément strong et deuxième lien. Ces deux éléments vont donc se comporter comme des éléments de type block.

Display : run-in

En précisant un display : run-in (valeur raccourcie de display : run-in flow), on définit un élément de type inline avec un comportement spécial : l’élément va essayer de fusionner / s’insérer dans l’élément de type block suivant.

Notez que cette valeur ne fait pas encore partie des recommandations officielles du W3C et est toujours en développement. A éviter pour un développement en production donc.

 

Les valeurs de display-inside de display

Comme je l’ai précisé plus haut, nous ne préciserons généralement qu’une seule valeur à display et laisserons le CSS appliquer la deuxième valeur par défaut. Dans la majorité des cas, ce sera la valeur liée à l’outer display qui sera précisée.

Cependant, pour certains éléments particuliers et dans certains contextes nous passerons plutôt une valeur d’inner display à la propriété display (et lui laisserons donc appliquer l’outer display lié par défaut).

Ce sont ces valeurs qui vont nous intéresser ici et notamment les valeurs d’affichage table, flex, grid et list-item.

Inner display: table

En précisant un display : table a un élément, l’élément va visuellement se comporter comme un tableau. Nous étudierons la création de tableaux en HTML plus tard dans ce cours.

La valeur complète du display par défaut est display : block table. A partir de là, vous pouvez déduire qu’un tableau en HTML a un outer display de type block par défaut.

Notez ici que les tableaux vont avoir des structures d’affichage complexes puisqu’ils vont être composés de lignes et de cellules.

Pour rendre complètement le comportement visuel d’un tableau, nous allons également pouvoir utiliser les valeurs suivantes pour display sur certains éléments en répliquant la structure d’un tableau « normal » même si nous essayerons d’éviter de faire ça tant que possible pour des raisons évidentes de sémantique.

• display : table-header-group : l’élément se comporte visuellement comme un élément thead ;
• display : table-footer-group : l’élément se comporte visuellement comme un élément tfoot ;
• display : table-row-group : l’élément se comporte visuellement comme un élément tbody ;
• display : table-row : l’élément se comporte visuellement comme un élément tr ;
• display : table-cell : l’élément se comporte visuellement comme un élément td ;
• display : table-column-group : l’élément se comporte visuellement comme un élément colgroup ;
• display : table-column : l’élément se comporte visuellement comme un élément col.

Nous pouvons également utiliser display : table-caption pour qu’un élément se comporte comme un élément caption. Cette valeur de display va créer un block avec un comportement relatif à celui du tableau.

Inner display: flex

En attribuant un display : flex a un élément, l’élément va visuellement se comporter comme une boite flexible, ce qui signifie que l’élément va se comporter comme un élément de type block pour l’outer display mais que l’intérieur de l’élément va suivre le modèle des boites flexibles ou flexbox (il va établir un nouveau contexte de formatage de type flex).

Nous allons consacrer une leçon au modèle des boites flexibles ou « flexbox » CSS dans ce cours car ce modèle est très intéressant pour créer des pages qui vont s’adapter à tous les écrans ou « responsives ».

La valeur complète de display : flex est display : block flex.

Inner display: grid

En attribuant un display : grid a un élément, l’élément va visuellement se comporter comme une grille : l’élément en soi va être de niveau block et va créer en interne un contexte de formatage de type grille ou grid c’est-à-dire disposer son contenu selon le modèle des grilles.

La valeur complète du display : grid est display : block grid.

Un cas particulier d’affichage : le display : list-item

Lorsque l’on crée un élément de liste en HTML avec l’élément li, on crée au final deux boites : une boite contenant la puce ou marqueur et une autre contenant le contenu textuel de notre élément de liste.

En attribuant un display : list-item a un élément, on va pouvoir recréer ce comportement et faire en sorte que l’élément se comporte comme un élément de liste et génère un marqueur et une boite de type block par défaut.

La valeur complète d’un display : list-item est display : block flow list-item. Ici, la valeur complète de display est composé de trois valeurs.

C’est tout à fait normal au sens où le mot clef list-item ne sert véritablement qu’à générer un marqueur de liste et ne dicte ni le comportement de l’outer display ni celui de l’inner display.

See the Pen Cours HTML CSS 6.1.3 by Pierre (@pierregiraud) on CodePen.

Ici, nous attribuons un display : list-item à tous les paragraphes de nos pages. Ces derniers vont donc se comporter comme des éléments de liste et avoir chacun un marqueur ou puce.

On en profite pour définir l’apparence et la position des puces car par défaut la position est outside et comme mes paragraphes sont collés au bord gauche de ma page les puces seraient en dehors de la page. Notez qu’on pourrait également conserver un list-style-position: outside et ajouter une margin-left.

 

Les valeurs de display composées héritées du CSS2 : inline-block, etc.

Au départ, en CSS2, on avait imaginé une syntaxe avec un mot clef unique à fournir en valeur de la propriété display. Dans ce contexte, cependant, comment faire pour ne modifier que l’outer display ou que l’inner display quand on veut obtenir un comportement qui n’est pas le comportement par défaut ?

Pour faire cela ont été introduit des mots clefs composés dont nous héritons aujourd’hui comme par exemple le mot clef inline-block qui est l’équivalent d’un display : inline flow-root.

Ces mots clefs composés font toujours partie des recommandations du W3C et vous êtes donc invités à les utiliser même s’ils ne sont finalement que le reflet des limitations passées.

Display : inline-block

En attribuant un display : inline-block a un élément, l’élément en soi va être de niveau inline (l’outer display est inline) tandis que le contenu de l’élément va se comporter comme un block.

La valeur display : inline-block est l’équivalent de display : inline flow-root.

La valeur display : inline-block va ainsi être intéressante pour placer des éléments en ligne tout en pouvant mettre en forme le contenu de ceux-ci et notamment pour pouvoir attribuer une taille précise à chaque contenu (je vous rappelle que cela n’est possible qu’avec des éléments / boites de type block).

See the Pen Cours HTML CSS 6.1.4 by Pierre (@pierregiraud) on CodePen.

Ici, on commence par définir une largeur fixe pour nos différents éléments span avec la propriété width.

On n’indique pas de valeur particulière pour le display de notre premier élément span. Celui-ci aura donc un display : inline qui est le type d’affichage par défaut des éléments span. En tant qu’élément inline, il va ignorer la propriété width.

On indique un display : block pour notre deuxième span. Il va donc se comporter comme un élément de type block et occuper sa propre ligne mais tenir compte de la largeur passée.

On passe finalement un display : inline-block à notre troisième élément span. Celui-ci va donc se comporter comme un élément inline pour son outer display mais ses boites internes vont pouvoir être mises en forme comme un élément block. L’élément va donc rester en ligne mais nous allons pouvoir définir une largeur précise pour celui-ci.

Display : inline-table

En attribuant un display : inline-table à un élément, celui-ci va se comporter comme un tableau mais de niveau inline.

La valeur display : inline-table va donc nous permettre de placer un tableau à la suite d’un autre contenu plutôt que sur une ligne qui lui est propre.

La valeur display : inline-table est l’équivalent de display : inline table.

Display : inline-flex

En attribuant un display : inline-flex à un élément, celui-ci va se comporter comme un élément de niveau inline et organiser son contenu selon le modèle des boites flexibles. Notez que les flex-items ne sont pas affectés par le type du conteneur : ils vont continuer à se comporter comme des boites de niveau block (tout en possédant certaines propriétés liées aux inline-block).

La valeur display : inline-flex est l’équivalent de display : inline flex.

Display : inline-grid

De la même façon, attribuer un display : inline-grid a un élément va le faire se comporter comme un élément de type inline qui va organiser son contenu selon le modèle des grilles.

La valeur display : inline-grid est l’équivalent de display : inline grid.

Display : inline list-item

Attribuer un display : inline list-item a un élément de liste va modifier le comportement d’affichage de l’élément qui sera alors affiché comme un élément de niveau inline qui va également créer une boite contenant un marqueur.

 

Les valeurs de non affichage display : none et display : contents

Finalement, nous allons terminer avec deux valeurs particulières de display : display : none et display : contents. Ces valeurs sont particulières car elles vont nous permettre de ne pas afficher certains éléments ou boites.

Display : none

Si un élément possède un display : none, il ne sera tout simplement pas affiché dans la page et les autres éléments se comporteront comme s’il n’existait pas (il ne prendra aucune place dans la page).

Il convient de ne pas confondre display : none et visibility : hidden. La propriété visibility va en effet pouvoir faire disparaitre (visuellement) un élément mais l’espace qu’il occupe va être conservé dans la page à la différence de display : none.

Notez qu’en appliquant un display : none à un élément, ses éléments enfants ne seront pas non plus affichés.

See the Pen Cours HTML CSS 6.1.5 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple ci-dessus, on utilise la propriété visibility et sa valeur hidden pour cacher un de nos éléments p. Vous pouvez cependant remarquer que si le contenu de l’élément ne s’affiche pas, la place qui lui était réservée dans le document est conservée.

Cela ne va pas être le cas pour le paragraphe auquel on a appliqué un display : none : non seulement l’élément ne va pas s’afficher mais le document va faire comme si le paragraphe n’existait pas du tout et celui-ci ne va donc pas prendre d’espace dans la page.

Display : contents

La valeur display : contents va également nous permettre de faire disparaitre les boites générées par un élément mais, à la différence de display : none, le contenu textuel de l’élément va être affiché normalement et les enfants de cet élément vont continuer à générer des boites et à apparaitre dans la page de manière normale.

Notez que cette valeur ne fait pas encore partie des recommandations du W3C et est toujours en cours de développement et peut donc être sujette à des changements ou à un abandon.