Mise en page CSS avancée grâce à la propriété display

Les possibilités d'architecture de mise en page au moyen des fonctionnalités offertes par la propriété display se révèlent tant nombreuses qu'alléchantes d'un point de vue pratique et créatif. Les agents utilisateurs actuels n'offrent malheureusement qu'un bien piètre support de ces différentes facultés d'affichage, puisque:

• display:table-cell n'est supporté qu'à partir d'Internet Explorer 8
• display:inline-block, implémenté dans Safari & Opera, n'est supporté dans Firefox qu'à partir de sa troisième version. Il est néanmoins possible de simuler partiellement son comportement sur les versions actuelles du navigateur de Mozilla grâce à la valeur propriétaire -moz-inline-stack (cf. “Inline-block dans tous les navigateurs modernes?”). Rappelons que la spécification autorise et valide l'utilisation de ce type de valeurs lorsqu'elles sont précédées d'un tiret. Internet Explorer, quant à lui, n'admet la transformation que pour un élément initialement de type inline. Cette restriction peut fort heureusement être levée sans peine en adressant à ce dernier — idéalement par commentaires conditionnels — un correctif pour les éléments visés:

  élément1,
  élément2,
  élément3
  {
    zoom:1;         /* Attribution du layout à l'élément */
    display:inline  /* Passage de block à élément inline */
  }

• display:run-in est implémenté uniquement par Opera dans sa globalité; Safari supporte quant à lui le cas d'une transformation d'un bloc en élément en ligne mais n'accepte pas l'inverse.

Si seule la valeur inline-block peut être décemment envisagée dans les contextes de production réels, il n'en demeure pas moins que la préparation aux autres techniques de mise en forme s'avère essentielle dès maintenant. Il est nécessaire d'appréhender ces différents modes d'affichages au plus tôt et d'adopter un comportement pro-actif à cet égard afin d'assurer une adoption sereine des technologies de mise en forme de demain. Les récentes annonces de Microsoft à propos de la huitième version de son butineur contribuent à nous laisser imaginer de profondes modifications dans nos schémas d'intégration futurs; assurons-nous d'y être bien préparé!