display

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer si la balise doit être affiché.

Remarques

• Contrôle du comportement de base des éléments : La propriété display contrôle la manière dont un élément HTML est rendu dans le flux du document. Par exemple, block force un élément à occuper toute la largeur disponible, tandis que inline lui permet de s'afficher à côté d'autres éléments. Comprendre les différences entre block, inline, et inline-block est essentiel pour structurer efficacement vos mises en page.
• Transition entre des mises en page flexibles et fixes avec flex et grid : En définissant display: flex ou display: grid, vous passez à des modèles de mise en page modernes et puissants. Ces modes permettent d'aligner, d'espacer et de gérer des éléments enfants de manière beaucoup plus intuitive qu'avec des techniques anciennes comme les flottants (float). Investir du temps pour maîtriser ces concepts rendra vos mises en page plus robustes et réactives.
• Effets invisibles avec none : Lorsque vous utilisez display: none, l'élément est complètement retiré du flux du document et devient invisible à l'oeil et au navigateur Web. Contrairement à visibility: hidden, conservant l'espace occupé par l'élément, none supprime totalement son empreinte. Cela peut affecter l'accessibilité et les outils comme les lecteurs d'écran, donc utilisez-le avec précaution.
• Combinaison avec des pseudo-éléments pour des effets avancés : La propriété display peut être appliquée aux pseudo-éléments comme ::before et ::after pour les rendre visibles ou invisibles. Par exemple, un pseudo-élément avec content et display: block peut ajouter un espace visuel sans modifier le DOM. Cette approche est utile pour les décorations et les ajustements mineurs dans une mise en page.
• Impact sur les conteneurs avec inline-block : display: inline-block combine les comportements de block et inline, ce qui permet à l'élément de s'afficher côte à côte avec d'autres tout en respectant ses dimensions propres. Cependant, il peut être affecté par des espaces blancs dans le code HTML, ce qui peut introduire des décalages inattendus. Pour éviter ce problème, supprimez les espaces ou utilisez des techniques comme les commentaires HTML.
• Transition et animation de display : Il est important de noter que display n'est pas une propriété animable directement en CSS. Pour créer des effets de transition similaires, combinez opacity ou height avec des transitions CSS ou JavaScript pour masquer ou révéler des éléments. Cela permet d'obtenir des animations fluides tout en contrôlant la visibilité et l'espace d'un élément.
• Interaction avec les modèles d'affichage imbriqués : Lorsque vous utilisez des modèles comme flex ou grid, les propriétés display des éléments enfants influencent fortement leur comportement. Par exemple, un élément flex enfant avec display: block peut être dimensionné indépendamment mais reste soumis aux règles du conteneur. Maîtriser ces interactions est crucial pour créer des mises en page cohérentes et flexibles.
• Effets inattendus avec des tableaux (table) : L'utilisation de display: table, table-row, et table-cell peut simuler le comportement des tableaux HTML pour des mises en page complexes. Cela peut être utile, mais ces modes ont des limites en termes de flexibilité et de compatibilité avec des modèles modernes comme flexbox. Pour la plupart des cas, préférez des approches plus modernes à moins que vous ne deviez recréer un tableau structurel précis.

Exemple

L'exemple suivant permet de ne pas afficher «Gladir» sur les téléphones iPhone et le lecteur iPod mais de l'afficher en mode bureau :