Introduction à la propriété CSS display

Dans ce chapitre on va apprendre à se servir de la propriété CSS display, notamment pour changer un élément en-ligne en un block et vice-versa css et bien d'autres notions, maintenant mettons nous au boulot

La propriété CSS display a pour mission de définir le mode d'affichage d'un élément. En fait il y en a plusieurs modes, dont 'inline' et 'block' qui sont d'ailleurs les plus importants. Le mode d'affichage détermine comment les éléments doivent être restitués. Quelles sont les propriétés CSS qui leur sont autorisées etc.

La valeur initiale de la propriété CSS display est 'inline', mais ça ne signifie pas pour autant que tous les éléments XHTML ont un profil en-ligne. En fait les règles comprises dans la feuille de style initiale adoptée par l'agent utilisateur écrasent la valeur initiale de la propriété CSS display.

Vous devez savoir que le W3C a présenté aux développeurs de navigateurs une feuille de style d'exemple qu'ils sont priés à utiliser par défaut. Cette feuille indique Le rendu par défaut des éléments XHTML notamment en ce qui concerne le mode d'affichage (display : block ou inline), les margins et les paddings, la taille de la police etc.

Les spécifications du W3C étant simplement des recommandations supplétives dépourvues de toute autorité, chaque navigateur a crée sa propre feuille de style initiale pour le rendu par défaut. Certains logiciels dont le code-source est ouvert comme les navigateurs Mozilla permettent l'accès en lecture et en écriture (modification) de cette feuille de style initiale.

Les navigateurs Mozilla tels que Firefox, Netscape, Mozilla et K-Meleon tournent tous avec la feuille de style initiale (Version: MPL 1.1/GPL 2.0/LGPL 2.1) développée par la fondation Mozilla. Cette dernière est accessible en lecture et en écriture. Donc vous pouvez la consulter et aussi la modifier librement.

Pour accéder à la feuille de style Mozilla, il suffit de faire une recherche dans le dossier d'installation du navigateur avec le motif "*.css", pour faire ressortir tous les documents CSS se trouvant dans ce répertoire. Après, ouvrez les deux fichiers "html.css" et "forms.css". Ce dernier comprend l'apparence des balises de formulaires (form, fieldset, input, textarea, option, legend, select, label, etc.), et "html.css" comprend l'aspect par défaut des autres balises (p, blockquote, h1..h6, table etc.). Vous remarquerez que cette feuille se trouve généralement dans le dossier "res".

Si on ouvre ladite feuille, on pourra par exemple modifier l'aspect par défaut de l'élément blockquote qui est :

blockquote {
display: block;
margin: 1em 40px;
}

Pour que les changements tiennent effet, il ne suffit pas d'actualiser la page avec le bouton de rafraichissement. Mais plutôt il faut fermer le navigateur, puis le démarrer encore une fois. Car l'actualisation aura pour effet de rafraichir uniquement le code XHTML et CSS de l'auteur (concepteur).

Les deux navigateurs Opera et Safari permettent uniquement la consultation de la feuille de style initiale. Celle d'Internet Explorer 6 et 7 n'est pas accessible ni en écriture ni en lecture.

Les valeurs de la propriété CSS display

Vous avez droit à un large éventail de choix, cependant il faut faire tés attention quant au support et à l'interprétation des agents utilisateurs de ces différentes constantes :

block : incite un élément XHTML à se comporter en tant qu'un élément de niveau bloc ;
inline : incite un élément XHTML à se mettre dans la peau d'un élément de niveau en-ligne ;
none : interdit la génération de boîtes aux éléments XHTML, ce qui implique le masquage de l'élément et la libération de l'espace qui lui a été prévu, pour les éléments subséquents ;
list-item : l'élément XHTML va se voir attribuer le profil d'un item de liste ('li' : list-item), et va recevoir par conséquence deux boîtes : une pour son contenu et l'autre pour le marqueur (puce, nombre, lettre etc.) ;
compact ou bien run-in : l'élément reçoit le profil d'un bloc ou d'un inline selon son contexte. A titre d'exemple les éléments XHTML 'del' et 'ins' peuvent recevoir une boîte de type bloc ou en-ligne selon leur contexte. Lisez cet extrait du DTD strict :
```

<!ENTITY % misc.inline "ins | del | script">
```
Le commentaire en haut signifie que les éléments cités peuvent apparaître en tant que bloc ou inline.

Par exemple si vous mettez l'élément en question dans un paragraphe, alors il sera conçu par le navigateur comme un inline. Si vous le placez directement dans le corps (entre les deux balaise <body>/<body>), il sera repris comme étant un bloc, et ainsi de suite.

Il y a d'autres constantes moins utilisées que je vais citer en vrac, pour vous inciter à chercher un peu dans la toile
table (équivalent de l'élément table en niveau bloc), inline-table (équivalent de l'élément table, mais en niveau inline), table-row-group (tbody en XHTML), table-column (col), table-column-group (colgroup), table-header-group (thead), table-footer-group (tfoot), table-row (tr), table-cell (td) et table-caption (caption).

Transformer un inline en un block et vice-versa (display)

L'une des applications les plus intéressantes de la propriété CSS Display consiste à transformer un inline en un bloc et vice-versa. Voici quelques exemples :

Convertir un élément de type en-ligne (inline) en élément de niveau bloc (block)

Généralement on convertit les éléments en-ligne remplacés comme les images, les contrôles de formulaires et l'élément object en des blocs, pour bénéficier du rendu par défaut des éléments de niveau bloc. Par exemple créer un retour à la ligne avant et après la boîte d'un élément de type en-ligne remplacé sans avoir à les envelopper dans d'autres blocs (par exemple mettre une image dans un paragraphe) ou se servir des balises <br />. La conversion peut aussi être motivée par l'accès à certaines propriétés CSS qui ne sont supportées que par le mode d'affichage ciblé.

Parfois on envisage l'insertion de grandes images, qu'on aime centrer et faire afficher à l'instar des autres blocs. Les éléments 'img', faisant partie des balises de niveau en-ligne remplacé, ils ne créent pas de retours à la ligne avant et après la boîte qui leur est destinée. Pour briser cette habitude, on va créer la classe suivante :

.image_bloc {
display: block;
margin: auto;
}

La classe 'image_bloc' que je viens de créer, permettra deux choses : tout d'abord, l'image va revêtir l'aspect d'un bloc, ceci permettra aussi de rendre valable le centrage horizontal par les marges latérales automatiques à l'élément 'img', du fait qu'il s'est transformé en un élément de niveau bloc. A présent il ne nous reste plus qu'à mettre le code XHTML :

<p>Du texte avant
<img src=Tim.jpg" alt="Tim" class="image-bloc" />
du texte après
</p>

Aperçu

Voici le portrait de Monsieur Tim burners-lee qui préside aujourd'hui le World Wide Web Consortium (W3C). Tim Tim burners-lee avait l'honneur de créer le World WIde Web. En fait à partir de 1990 il développe les trois principales technologies du Web : les adresses Web, le Hypertext Transfer Protocol (HTTP) et le Hypertext Markup Language (HTML). Il développe le premier navigateur Web et éditeur Web (dénommé WorldWideWeb et développé sur NeXTSTEP) et le premier serveur HTTP, le CERN httpd.

Convertir un élément de niveau bloc (block) en élément de type en-ligne (inline)

On va apprendre dans l'exemple ci-dessous comment insérer un titre et un paragraphe au même niveau. Pour ce faire on va créer la classe suivante :

.en-ligne {
display: inline;
}

Puis on va mettre le code XHTML suivant :

<h3 style="display: inline;">Le XHTML :</h3>
<p style="display: inline;">Veut dire Extensible HyperText Markup Language.</p>

Le XHTML :

Veut dire Extensible HyperText Markup Language.

On a assigné la classe 'en-ligne' aux deux éléments 'h3' et 'p', pour que le retour à la ligne après 'h3' et le retour à la ligne avant 'p' n'aient pas effet. Sinon vous n'aurez pas les deux éléments sur la même ligne.

Vous devez éviter la syntaxe suivante, même s'il permet d'aboutir au même rendu visuel :

<p><h3 style="display: inline;">Le XHTML :</h3>
Veut dire Extensible HyperText Markup Language.</p>

En fait le code XHTML que je viens de taper n'est pas conforme aux standards du W3C, puisqu'on peut pas mettre l'élément 'h3' dans la balise <p>. A cette occasion, il faut respecter les anciennes règles d'imbrication, même si vous changez le mode d'affichage d'un élément.

La propriété CSS display avec la valeur list-item

Vous avez la possibilité de créer une lise en passant outre les éléments 'li'. Exemple :

<ul>
  <strong style="display: list-item;">premier élément en gras</strong>
  <em style="display: list-item;">deuxième élément en italique</em>
</ul>
<ol>
  <strong style="display: list-item;">premier élément en gras</strong>
  <em style="display: list-item;">deuxième élément en italique</em>
</ol>

Aperçu

premier élément en gras

deuxième élément en italique

premier élément en gras

deuxième élément en italique

Un tableau avec la propriété CSS display

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>display</title>
<style type="text/CSS">
div.tableau { display:table; border-collapse:collapse; }
h3.titre {display : table-caption; color:#000066; text-align:center; }
div.ligne { display:table-row; }
div.cellule { display:table-cell; border:thin solid green; padding:4px; }
</style>
</head>
<body>
<div class="table">
<h3 class="titre">titre du tableau</h3>
<div class="ligne">
<div class="cellule">case 1</div>
<div class="cellule">case 2</div>
<div class="cellule">case 3</div>
<div class="cellule">case 4</div>
</div>
</div>
</body>
</html>

Toutes les valeurs qui concernent le rendu de tableaux ne sont pas interprétées par Internet Explorer 6 et 7. Mais les autres (none, block, inline, list-item), elles sont supportées par tous les navigateurs répandus.

La règle CSS "display: none" contre la règle CSS "visibility: hidden"

Je viens de signaler ci-dessus que lorsque vous assignez la valeur 'none' à la propriété display, l'élément sera maqué par le navigateur. Il y a une autre propriété CSS visibility qui permet aussi d'afficher ou de masquer un élément, selon les deux valeurs 'hidden' (caché) ou 'visible' (visible).

Certes les deux propriétés CSS visibility et display se rencontrent plus ou moins en matière d'affichage et masquage des éléments XHTML, mais sachez que vous n'allez jamais trouver des redondances ou des alias dans l'inventaire des propriétés CSS. En fait les deux propriétés CSS visibility et display divergent sur les points suivants :

un élément masqué par la propriété visibility ("visibility: hidden;") va réserver tout de même l'espace qui lui avait été prévu, contrairement à la propriété CSS display, qui interdit la génération de la boîte aux éléments XHTML.

Donc les blocs qui suivent un élément masqué avec la propriété CSS display seront affichés en respectant le cadre destiné à l'élément caché. En deux mots un élément masqué avec la propriété CSS visibility aura toujours une influence sur la mise en page. Exemple :
```
<p>avant le bouton <input type="button" value="appuyer" /> après le bouton </p>
<p>avant le bouton <input type="button" value="appuyer" style="display: none;" />
    après le bouton </p>
<p>avant le bouton <input type="button" value="appuyer" style="visibility: hidden;" />
    après le bouton </p>
```
Aperçu

avant le bouton après le bouton

avant le bouton après le bouton

avant le bouton après le bouton
le masquage d'un élément avec la règle CSS "display: none;" implique le masquage définitif de ces enfants même si vous leur spécifiez par la suite une propriété CSS display avec une autre valeur autre que none. Exemple :
```
<blockquote style="display: none;">
  <p style="display: block;">Paragraphe</p>
</blockquote>
```
Le paragraphe est condamné à rester masqué. La règle CSS "display: block;" n'aura pas pour effet d'écraser celle définie à l'élément parent.

Par contre, grâce à la propriété CSS visibility, vous avez le plein droit de cacher un élément puis d'afficher certains de ses enfants. Exemple :
```
<blockquote style="visibility: hidden;">
  <p style="visibility: visible;">Paragraphe 1</p>
  <p>Paragraphe 2</p>
</blockquote>
```
Le premier paragraphe s'affichera bel et bien, mais pas le deuxième, qui va hériter de son parent la règle CSS "visibility: hidden;".

L'utilisation des propriétés CSS display et visibility dans des scripts DHTML

Les propriétés CSS display et visibility peuvent être utilisées dans des scripts DHTML (dynamique HTML). Par exemple afficher un élément ou le cacher suite à une action entreprise par l'internaute : un click, un double-click, un survol avec la souris etc.

Qu'est ce que le DHTML ?

Le DHTML n'est pas un nouveau langage mais plutôt un nouveau concept qui se base sur le JavaScript, les CSS et le DOM (document object model) pour permettre la modification dynamique des éléments de la page (même après le téléchargement complet de la page) soit automatiquement ou suite à une action entreprise par l'utilisateur (click, double-click, survol avec la souris d'un élément etc.).

La propriété CSS display

Quelle est la capitale du Maroc ?

Remarquez qu'avant d'afficher la réponse aucun espace n'a été réservé, mais après sa visualisation la hauteur du block s'est agrandie (c'est ce qui fait la différence entre "display: none" et "visibility: hidden").

La propriété CSS visibility

La propriété display ne change pas les règles d'imbrication !

Pour avoir un document conforme aux standards du W3C, il faut respecter plusieurs règles dont l'imbrication juste de balises. Ces règles d'imbrication demeurent les mêmes abstraction faite des valeurs que vous attribuez à la propriété CSS display. Donc il faut se référer à l'aspect initial de l'élément XHTML (bloc, inline etc.). Pour vous expliquer davantage, on va passer à un exemple plus parlant

<body>
<em style="display: block">
Texte mis en exergue
</em>
</body>

Le code ci-dessus n'est pas valide, car l'élément 'em' demeure un inline non remplacé, et ne peut donc pas être placé directement dans le corps sans l'envelopper par un autre bloc.

Affichage d'éléments XHTML avec la propriété CSS display

Cours

Écoles

Tchat