display |
Affichage |
---|---|
CSS |
Syntaxe
display: paramètres; |
Paramètres
Paramètre | Description | |||||
---|---|---|---|---|---|---|
paramètres | Ce paramètre de propriété permet d'indiquer le type d'affichage : | |||||
Valeur | Description | |||||
block | Cette valeur permet d'indiquer d'afficher normalement la balise dans une boite (un arrêt de ligne avant et après la balise). | |||||
inherit | Cette valeur permet d'indiquer qu'il faut hériter de la balise parente. | |||||
inline | Cet attribut permet d'indiquer que la balise doit être générer dans une boite en ligne (pas d'arrêt de ligne avant ou après la balise). C'est la valeur par défaut. | |||||
inline-block | Cette valeur permet d'indiquer qu'il faut générer une boite en bloc, présenté comme une boite en ligne. | |||||
inline-table | Cette valeur permet d'indiquer qu'il faut générer une boite en ligne (comme une balise table sans ligne d'arrêt avant et après). | |||||
list-item | Cette valeur permet d'indiquer qu'il faut générer une boite en bloc et dans une boite en ligne pour le marqueur de liste. | |||||
none | Cette valeur permet d'indiquer qu'il ne faut pas afficher la balise et que l'espace que la balise occupait n'est pas représenté dans la page. | |||||
run-in | Cette valeur permet d'indiquer qu'il faut générer une boite ou une boite en ligne dépendante du contexte. | |||||
table | Cette valeur permet d'indiquer qu'il faut générer une boite en ligne (comme une balise table avec une ligne d'arrêt avant et après). | |||||
table-caption | Cette valeur permet d'indiquer qu'il faut agir comme un caption de tableau. | |||||
table-cell | Cette valeur permet d'indiquer qu'il faut agir comme une cellule de tableau. | |||||
table-column | Cette valeur permet d'indiquer qu'il faut agir comme une colonne de tableau. | |||||
table-column-group | Cette valeur permet d'indiquer qu'il faut agir comme un groupe de colonne de table (balise colgroup). | |||||
table-footer-group | Cette valeur permet d'indiquer qu'il faut agir comme un groupe de ligne de pied de tableau. | |||||
table-header-group | Cette valeur permet d'indiquer qu'il faut agir comme un groupe de ligne d'entête de tableau. | |||||
table-row | Cette valeur permet d'indiquer qu'il faut agir comme une ligne de tableau. | |||||
table-row-group | Cette valeur permet d'indiquer qu'il faut agir comme un groupe de ligne de tableau. |
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 :
Dernière mise à jour : Dimanche, le 20 décembre 2015