6.3 Affichage/Restitution CSS

La propriété display permet de changer le type d’élément HTML. Par défaut, un paragraphe <p> (un élément de niveau bloc) aura une valeur d’affichage – display par défaut deblock, mais peut être restitué sous la forme d’un texte en ligne – inline :

p { display: inline;}

Pourquoi ne pas utiliser un élément HTML inline, comme <span> ?

Parce que vous choisissez un élément HTML pour sa signification, pas pour son rendu. Si nous avons décidé qu’un paragraphe convenait le mieux à notre contenu, nous ne devons pas modifier le tag uniquement à des fins de style. CSS est là pour s’occuper du style.

En bref, l’affichage permet de modifier le type d’un élément sans en changer la signification/le sens.

Chaque option d’affichage a un comportement de rendu spécifique :

• block prendra toute la largeur disponible
• inline agira comme texte brut
• inline-block est, comme son nom l’indique, un mélange de comportement en bloc et en ligne, une option du «meilleur des deux mondes»
• list-item est similaire à block car il occupe toute la largeur disponible, mais affiche un point avant le début de chaque ligne
• table, table-row and table-cell ont tous un comportement très spécifique, bien qu’inattendu, permettant des présentations plus intéressantes

display: block

Cela transformera n’importe quel élément en élément block.

Cette technique est souvent utilisée sur les liens pour augmenter leur zone cliquable, qui peut être facilement évaluée en définissant une couleur d’arrière-plan.

.menu a { background: red; color: white;}

<ul class="menu">
  <li>
    <a>Home</a>
  </li>
  <li>
    <a>Features</a>
  </li>
  <li>
    <a>Pricing</a>
  </li>
  <li>
    <a>About</a>
  </li>
</ul>

Si nous transformons ces liens en blocks, nous augmentons leur zone cible :

.menu a { background: red; color: white; display: block;}

display: inline

Cela transforme n’importe quel élément en éléments inline, comme s’il s’agissait d’un simple texte.

Il est souvent utilisé pour créer des navigations horizontales, où les éléments de liste sont sémantiquement utiles.

<ul class="menu">
  <li>
    <a>Home</a>
  </li>
  <li>
    <a>Features</a>
  </li>
  <li>
    <a></span>Pricing</a>
  </li>
  <li>
    <a>About</a>
  </li>
</ul>

.menu li { display: inline;}

display: list-item

Les seuls éléments HTML affichés en tant qu’élément de liste – list-item sont les éléments de liste (sans surprise) <li> mais également les descriptions de définition <dd>.

Un élément de liste est rendu avec un point (si dans une liste non ordonnée <ul>) ou avec un numéro incrémentiel (si dans une liste ordonnée <ol>).

Étant donné que le rendu de ces puces et de ces chiffres varie selon les navigateurs et est également difficile à styliser en CSS, la règle display: list-item n’est jamais utilisée. En fait, il est courant que les<li> soient rendus sous la forme display: block ou display: inline, car ils sont plus flexibles en termes de style.

display: none

Appliquer display: none; à un élément HTML le supprime de votre page Web, comme s’il n’avait jamais existé dans votre code.

.gone-baby-gone { display: none;}

<p>Did I hear someone speaking??</p>
<p class="gone-baby-gone">Ha ha ha hahah</p>
<p>I must be dreaming...</p>

Il y a 3 paragraphes dans le code, mais 2 seulement apparaissent, comme si le second n’avait jamais existé.

visibility: hidden

La propriété CSS visibility est légèrement similaire à display. Appliquer visibility: hidden; cache un élément de votre page, mais ne le rend qu’invisible: il occupe toujours l’espace qu’il était supposé avoir.

.hollow-man { visibility:hidden;}

<p>So far away from me</p>
<p class="hollow-man">So far i just can't see</p>
<p class="hollow-man">So far away from me</p>
<p class="hollow-man">You're so far away from me</p>
<p>You're so far away...</p>

Il y a 5 paragraphes dans le code, seuls 2 apparaissent, mais l’espace que les paragraphes masqués étaient supposés occuper existe toujours, mais vous ne pouvez pas les voir.