Encyclopédie CSS:display

Modèle:Programmation Comprendre la propriété CSS display peut être compliqué en raison de ses nombreuses valeurs possibles, qui affectent chacune le comportement et l'affichage d'un élément. Cette propriété détermine comment un élément se comporte dans le document : s'il sera de type bloc, en ligne, flexible, en grille ou complètement invisible.

Liste des valeurs disponibles pour la propriété display

Voici une liste des valeurs disponibles pour la propriété display :

• display: -webkit-box — une valeur obsolète pour la création de mises en page en bloc dans les navigateurs Webkit.
• display: -webkit-inline-box — valeur similaire à -webkit-box, mais pour les mises en page en ligne dans les navigateurs Webkit.
• display: block — rend l'élément de type bloc, occupant toute la largeur de son parent.
• display: contents — l'élément disparaît, mais ses éléments enfants restent dans le DOM.
• display: flex — transforme l'élément en un conteneur de mise en page flexible (Flexbox).
• display: flow — définit le comportement de flux par défaut (valeur principale pour la plupart des éléments).
• display: flow-root — crée un nouveau contexte de mise en forme de bloc, comme si l'élément était un conteneur bloc.
• display: grid — transforme l'élément en un conteneur de mise en page en grille (Grid).
• display: inherit — l'élément hérite de la valeur de la propriété display de son parent.
• display: initial — réinitialise la propriété display à sa valeur par défaut.
• display: inline — rend l'élément en ligne, il ne prend que la largeur nécessaire.
• display: inline-block — combine le comportement en ligne et en bloc (peut avoir une taille, mais reste dans la ligne).
• display: inline-flex — transforme l'élément en un conteneur Flexbox en ligne.
• display: inline-grid — transforme l'élément en un conteneur Grid en ligne.
• display: inline-masonry — valeur expérimentale pour les mises en page en ligne avec une grille dynamique.
• display: inline-table — rend l'élément semblable à une table en ligne.
• display: list-item — rend l'élément un élément de liste avec un marqueur (comme dans <li>).
• display: masonry — valeur expérimentale pour les mises en page en grille avec une disposition dynamique.
• display: math — valeur expérimentale pour les mises en page mathématiques.
• display: none — l'élément est masqué et ne prend pas de place dans le document.
• display: revert — réinitialise la propriété display aux styles du navigateur.
• display: revert-layer — valeur expérimentale pour réinitialiser les styles dans des couches spécifiques.
• display: ruby — rend l'élément un conteneur pour les annotations Ruby (utilisé pour les langues nécessitant des Furigana).
• display: ruby-text — rend l'élément comme un texte Ruby (Furigana).
• display: table — rend l'élément semblable à une table en bloc.
• display: table-caption — rend l'élément une légende de table.
• display: table-cell — rend l'élément une cellule de table.
• display: table-column — rend l'élément une colonne de table.
• display: table-column-group — rend l'élément un groupe de colonnes de table.
• display: table-footer-group — rend l'élément un groupe de lignes de pied de table.
• display: table-header-group — rend l'élément un groupe de lignes d'en-tête de table.
• display: table-row — rend l'élément une ligne de table.
• display: table-row-group — rend l'élément un groupe de lignes de table.
• display: unset — supprime la valeur définie et remet la propriété à son état initial ou hérité.

Chacune de ces valeurs a un rôle spécifique qui permet de contrôler de manière flexible la mise en page d'une page web. Cependant, en raison de la grande variété des valeurs, il peut être difficile de choisir celle qui convient, et un mauvais choix peut entraîner des résultats inattendus.

Dans des articles séparés, nous examinerons en détail chaque valeur de la propriété display, apprendrons quand et comment les utiliser et analyserons leur compatibilité avec les navigateurs.