La propriété CSS Display est un puissant outil souvent mal connu et dont les possibilités réelles sont rarement utilisées. Il faut avouer que Internet Explorer y est pour quelque chose... espérons qu'il se mette à la page, vu les horizons ouvertes par cette propriété.
Sources et documentation :
- Le dicolive Média-box : http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=134
- Le site de Blooberry [en] : http://www.blooberry.com/indexdot/css/properties/classify/display.htm
- Display et Internet Explorer [en] : http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp
- Les traductions CSS du W3C : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#display-prop
La propriété Display admet 18 valeurs : inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none et inherit.
Officiellement, Internet Explorer 6 reconnaît 7 valeurs pour Display : block, none, inline, inline-block, list-item, table-header-group et table-footer-group. Cette restriction est comblée dans les versions de IE à partir de IE8.
A noter que IE accepte une valeur qui n'est pas dans les standards CSS2 mais uniquement dans un CSS 2.1 à l'état de draft, 'inline-block' : Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
Certaines des ces valeurs ne sont d'ailleurs reconnues qu'approximativement comme l'explique le site de Blooberry [en]:
IE says it supports an "inline-block" value on this property, which would make a rendered block behave like an inline element box to the content surrounding it (eg, line-feeds in or caused by an element have no effect on surrounding in-line content.) But in testing, it does not work on elements that have an intrinsic "block" 'display' value (DIV, TABLE). It does work as expected on elements that have an intrinsic "inline" 'display' value (eg: SPAN.) If "inline-block" worked the way it should, then the explicit 'display' value would override an element's default 'display' value.
IE n'est pas le seul à avoir des rendus approximatifs : Netscape 6.x n'interprête pas correctement 'display: inline-block' et Opera 4+ a des défauts sur 'display: list-item'
Pour information, voici l'explication des différentes valeurs de Display, selon la traduction de Yoyodesign :
Block et Inline
Display : block et Display : inline sont les utilisations les plus fréquentes de la propriété Display.
- block
- Induit un élément à générer une boîte de bloc principale
- inline
- Induit un élément à générer une ou plusieurs boîtes en-ligne
Il existe principalement deux grands types de balises : les éléments en Bloc et les éléments en Ligne.
- les balises de type BLOC ("block") comme les balises <p>, <ul>, <li>, <div>, <form>, <input>, <blockquote>, <h1>...<h6>,... (voir la liste des éléments de type Bloc)
- les balises de type EN LIGNE ("inline") comme <a>, <strong>, <em>, <span>, <img>,... (voir la liste des éléments de type En-ligne)
De ces deux groupes découlent des spécificités d'affichage :
- les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale). Par exemple: une suite de paragraphes ou une liste
- les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant). Par exemple: la mise en gras d'une partie de texte à l'aide de la balise <strong>
Au niveau structurel et imbrications :
- une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou inline, et peut avoir une dimension (largeur, hauteur définies)
- une balise inline ne peut contenir QUE une (ou plusieurs) balise inline, et n'a pas de dimension à proprement parler (il n'occupe que la place minimum nécessaire à son contenu)
Display : block et Display : inline permettent donc de passer d'une structure à l'autre, en modifiant le comportement d'un élément. L'exemple le plus courant est de vouloir donner une dimension et une image de fond à une balise <a> pour en faire un bouton. Par défaut, <a> est une balise Inline, il faut donc la passer en Block pour lui donner des dimensions et la sortir du texte courant.
List-item
- list-item
-
Induit un élément (ex. l'élément LI en HTML) à générer une boîte de bloc principale et une boîte en-ligne pour un item de liste
Consulter la partie traitant des listes pour des informations et des exemples de mise en forme de celles-ci
Les éléments de liste ne sont ni des balises Bloc, ni des balises Inline. Ils ont un comportement différents. En passant un élément en Display: list-item, il pourra supporter les propriétés suivantes : 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'
Marker
- marker
-
Cette valeur précise la qualité de marqueur du contenu généré apparaissant avant ou après une boîte. Elle ne devrait être employée qu'avec les pseudo-éléments :before et :after liés à des éléments de type bloc.
Dans certains cas, cette valeur est interprétée comme 'inline'.
Vous trouverez sur Yoyodesign des explications détaillées sur les Marqueurs.
None
- none
-
Cette valeur fait qu'aucune boîte n'est générée par l'élément dans la structure de formatage (c.à.d., cet élément n'a pas d'influence sur la mise en forme du document). Les éléments qui en descendent ne génèrent pas de boîtes non plus ; on ne peut plus modifier leur comportement avec la propriété 'display'.
Noter qu'une valeur 'none' ne crée pas de boîte invisible, elle ne crée pas de boîte du tout. CSS comprend des mécanismes permettant la génération de boîtes dans la structure de formatage, boîtes qui influencent la mise en forme mais qui ne sont pas visibles.
Consulter la partie traitant de la visibilité pour les détails
run-in et compact
- run-in et compact
- Ces valeurs créent une boîte de bloc ou en-ligne, selon le contexte. Les propriétés s'appliquent aux boîtes compactes ou en enfilade en fonction de leur statut final (types bloc ou en-ligne). Par exemple, la propriété 'white-space' ne s'applique que si la boîte a un type bloc
Explication sur les termes de boites en enfilade et de boites compactes
Ces deux positionnements sont assez déroutants au premier abord car selon leurs position les uns par rapports aux autres, les boites deviennent soit bloc soit en-ligne.
Les valeurs de Tables
- table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell et table-caption
- Ces valeurs donnent à un élément le comportement de celui d'une table (avec les restrictions décrites au chapitre sur les tables)
Actuellement, la valeur la plus intéressante est sans doute Display: table-cell. En effet, en donnant à un bloc le comportement habituel d'une cellule, le contenu de ce bloc va automatiquement se centrer verticalement dans ce bloc. Cette solution résoud tous les soucis d'alignement vertical que posent les mises en pages sans tableaux... malheureusement (est-il utile de le rappeler ?) Internet Explorer n'applique pas cette valeur.