La propriété CSS display

La propriété display spécifie la manière dont doit être rendu un élément en HTML. C’est certainement la déclaration CSS la plus importante, depuis que la séparation entre la structure et la présentation est devenu la règle en matière de construction de page Web.

Pourtant elle est souvent mal connu des développeurs Web, leurs utilisations se limitent généralement aux seuls display:block, display:inline et display:none. Pourtant, on trouve d’autres propriétés tout a fait intéressantes tel que display:inline-block, display:list-item, et la famille des display:table .

Les différents modes de rendus

display:block

display: block veut dire que l’élément est affiché comme un bloc (logique non ?), c’est le mode d’affichage par défaut pour les paragraphes, les titres, … . Un bloc dispose d’un espace configurable via les propriétés padding, width, height mais ne tolère aucun élément sur la même ligne que lui, sauf si on utilise le positionnement flottant.

display:inline

display: inline veut dire que l’élément vient s’insérer directement à la suite de l’élément précédent, à l’intérieur du bloc courant. Si l’élément se trouve entre 2 blocs, il forme ce qu’on appelle un bloc anonyme (donc configurable), sinon il prend la taille la plus petite possible.

display:none

Ce mode d’affichage est certainement le plus simple, il n’affiche rien comme si l’élément n’étais pas présent dans la page.

display:inline-block

Cette propriété est certainement l’une des plus utiles dans la mise au point des mises en pages modernes, elle permet de donner une structure de bloc à un élément inline.

Ainsi, l’élément en question dispose d’une zone rectangulaire configurable, tout en conservant le comportement des éléments en ligne.

display:list-item

C’est le mode d’affichage par défaut pour les listes non ordonnées, et les listes ordonnées. Personnellement, je vois pas bien l’intérêt d’un affichage en mode liste pout des balises qui ne sont pas elle même des listes.

display:table

display: table demande aux éléments de s’afficher comme une table. Les éléments de la sous arborescence doivent être affiché comme de table-row, et des table-cell, fournissant un affichage similaire à ce que l’on connaissait avec les mises en pages en tableau de la fin du dernier millénaire.

Malgré l’apparence vieillot de ce mode d’affichage, l’intérêt est bien réel, il nécessite à lui tout seul un article. Ce qui dépasse largement le cadre de cette présentation.

display:run-in et display:compact

Ces 2 dernier modes d’affichages ont la particularité d’être incompréhensible. Si une âme charitable veut bien m’expliquer à quoi ils servent je leur serait reconnaissant.

Compatibilité avec les navigateurs

Tout ceci est bien beau, mais est ce que les navigateurs actuelles du marché l’implémentent ? Malheureusement, bien que les dernières versions d’Internet Explorer (IE8), Firefox 3, Safari, Opera, Google Chrome et Konqueror implémente les propriétés block, inline, inline-block, table, table-cell. Plus de 25 % des internautes utilisent encore IE 6, qui lui offre un support très faible de ces différents modes d’affichages. IE 7 souffre des même problèmes avec une audience encore plus fortes (30 %), mais on peut raisonnablement penser que les gens qui sont passés de IE 6 à IE 7 feront majoritairement l’update en version 8.

On se retrouve donc inévitablement avec l’alternative suivante : soit de faire du “pseudo-Web” et être compatible avec IE 6, soit laisser plus d’un quart des internautes sur le bords de la route. Mon choix est fait.

LinkedIn
Reddit

Voir aussi

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019