Dans la droite ligne de notre tutoriel "S'affranchir des tableaux HTML en CSS2", voyons comment déporter le maximum d'information relative au style dans des règles CSS, au lieu d'utiliser des attributs HTML, ceci tout en tenant compte des spécificités des navigateurs, d'une part, et des difficultés liées à des mises en page complexes, d'autre part.
Tous les exemples qui suivent donneront lieu à un affichage identique sur IE 5+, Netscape 6+ et Opera 6+. Ils n'ont pas été testés sur des navigateurs plus anciens, mais cela ne signifie pas que ces derniers les interprètent obligatoirement de manière incorrecte.


1) Remplacer les balises et attributs HTML "dépréciées" en HTML 4.0.1
Par exemple, au lieu d'écrire <center>, on utilisera les balises <div> (pour un paragraphe) ou <span> (pour une portion de texte) de la manière suivante:

<div style="text-align: center">

De même, on pourra remplacer <font face="Verdana" size="2" color="#000066"> (par exemple) avec:

<div style="font-face: Verdana; font-size: 10pt; color: #66666">

On objectera que le code est alors parfois alourdi, moins clair (trop de balises <div> peu "parlantes"), mais il faut rappeller que <center> et <font>, parmi d'autres, ne sont plus des balises dont le W3C peut garantir le support dans les prochaines versions des navigateurs, car elles sont "dépréciées" (deprecated).

Pour une image (balise <img ...>), les attribut border, hspace, vspace... sont également obsolètes. Pour remplacer, par exemple, <img src="monimage.jpg" width="20" height="30" border="0" hspace="5">, on écrira:

<img src="monimage.jpg" width="20" height="30" style="border-style: none; margin: 0px 5px 0px 5px">

2) Tirer profit de "l'héritage de style"
Si vous imbriquez des balises <div> ou <span>, tous les styles appliquées aux balises "contenantes" et ne concernant pas la "forme" des blocs définis par celles-ci seront valables pour les balises "contenues". Ainsi:

<div style="text-align: right; color: #660000; border: 2px solid black">
<div style="font-weight: bold">Exemple</div>
</div>

Donne:

dont le code, sans feuille de style, .

Le but est d'obtenir le même résultat avec des balises <div> et du code CSS, seulement.
Une tentative est donnée dont le résultat est:

L'idée est de définir un (bloc positionné) par une balise <div> dont le positionnement est relatif (par rapport au dernier élément du document HTML). Au sein de ce calque on en définit d'autres, cette fois de positionnement absolu par rapport au calque qui les contient. Ce dernier est bien un calque et non un simple bloc, car il est positionné (de manière relative ici). Si on avait utilisé un bloc non positionné, les calques en position absolue auraient été placés par rapport au coin supérieur gauche de la fenêtre du navigateur.

Quels sont les avantages de cette deuxième approche?
- Premièrement l'ordre des blocs de positionnement "absolu" est arbitraire, ce qui peut être pratique pour le référencement par exemple (on met en avant le bloc qui contient le plus de mots-clés, alors qu'il s'affiche en fin de table).
- Deuxièmement, la structure du code HTML est simplifiée, les blocs sont homogènes.
- Troisièmement l'affichage est maîtrisé au pixel près sur tous les navigateurs cités plus haut.
- Quatrièmement, le code HTML sera valide suivant les spécifications HTML 4.0.1.

Quels en sont les inconvénients ? Nous en voyons deux principaux: les calques doivent avoir une hauteur, d'une part; nous ne maîtrisons pas la position verticale du texte au sein des calques, d'autre part. Nous détaillons ces deux points dans ce qui suit.

4) ...Mais attention aux hauteurs des calques

Comme le montre le résultat suivant, voilà ce qu'on obtient quand on ne précise pas la hauteurs des calques, et notamment du calque "contenant" (en positionnement relatif):

Que se passe-t-il? Tout simplement, le calque "contenant" (en positionnement relatif), n'hérite pas des hauteurs des calques qu'il contient. Ces derniers ont la taille du texte ou des images qu'ils contiennent, mais leur "contenant", qui ne contient en propre ni texte ni image, est de hauteur nulle!

En pratique, cela signifie que pour un tableau dont les cellules sont de hauteurs variables suivant la quantité de texte et d'images qu'elles contiennent, la taille du calque "contenant" ne s'ajustera pas en fonction. Soit on lui attribue alors une taille (hauteur) fixe, suffisamment importante pour tous les cas de figure, soit on utilise quand même les tableaux HTML, qui, après tout, sont aussi là pour cela.

De plus, les "cellules de tableau" sous forme de bloc CSS ne permettent pas de préciser la position verticale du texte, contrairement aux tableaux HTML et leur attribut valign.

5) Comprendre les marges, espacements et bordures...
La taille d'un bloc ne comprend ni les marges, ni les bordures.

<div style="margin: 0px 15px 0px 10px; width: 400px"> - Largeur occupée: 425px
<div style="border: 2px solid black; width: 400px"> - Largeur occupée: 404px
<div style="padding: 1px 1px 1px 1px; width: 400px"> - Largeur occupée: 400px

Ces quelques considérations doivent permettre d'éviter des erreurs et de perdre du temps dans l'élaboration de pages HTML incluant de manière massive des définitions de style (ou les déportant dans un fichier externe).


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius