 SELFHTML actuel Articles spécialisés Feuilles de style CSS
|
|
|
Thomas J. Sebestyen :
|
|
|
|
|
| E-Mail: |
 thomas.js@selfhtml.org
|
| Homepage-URL: |
 http://www.meta-text.net
|
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
|
Les listes sont un moyen pratique et fréquemment employé pour représenter des informations telles que, par exemple, des index de contenu etc... Il est certes possible à l'aide de HTML de fixer aussi la numérotation de listes, les limites y sont cependant rapidement atteintes quand il s'agit d'une numérotation hybride, à savoir d'une façon de numéroter panachée où ce n'est pas une simple numérotation automatique qui doit être exécutée, mais où différents formats d'énumération doivent être mélangés.
Les CSS viennent ici à la rescousse avec la possibilité de générer automatiquement des contenus et ainsi de définir et d'orienter des compteurs de numérotation. L'exemple suivant montre comment parvenir à une telle numérotation hybride avec très peu de mentions.
|
|
Exemple d'affichage: aperçu (n'est interprété correctement pour l'instant que par Opera)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Formater des listes avec une numérotation hybride
</title>
<style type="text/css">
<!--
ol.niveau1 {
counter-reset:Point_liste_niveau1;
list-style-type:none;
}
ol.niveau1 li:before {
content: counter(Point_liste_niveau1) ". ";
counter-increment:Point_liste_niveau1;
}
ol.niveau2 {
counter-reset:Point_liste_niveau2;
list-style-type:none;
}
ol.niveau2 li:before {
content: counter(Point_liste_niveau1) counter(Point_liste_niveau2,lower-alpha) ". ";
counter-increment:Point_liste_niveau2;
}
-->
</style>
</head>
<body>
<ol class="niveau1">
<li>Généralités sur les pseudo-formats</li>
<li>Pseudo-formats pour les liens
<ol class="niveau2">
<li>:link</li>
<li>:visited</li>
<li>:hover</li>
<li>:active</li>
<li>:focus</li>
</ol>
</li>
<li>Pseudo-formats pour les paragraphes
<ol class="niveau2">
<li>:first-line</li>
<li>:first-letter</li>
<li>:first-child </li>
</ol>
</li>
<li>Pseudo-formats pour du texte généré automatiquement
<ol class="niveau2">
<li>:before</li>
<li>:after</li>
</ol>
</li>
<li>Numérotation automatique</li>
</ol>
</body>
</html>
|
L'exemple devrait être représenté sous une forme analogue à celle-ci par le navigateur:
1. Généralités sur les pseudo-formats
2. Pseudo-format pour les liens
2a. :link
2b. :visited
2c. :hover
2d. :active
2e. :focus
3. Pseudo-formats pour les paragraphes
3a. :first-line
3b. :first-letter
3c. :first-child
4. Pseudo-formats pour du texte généré automatiquement
4a. :before
4b. :after
5. Numérotation automatique
Dans l'exemple est définie une liste imbriquée avec deux niveaux, pour laquelle la numérotation des points de la liste du deuxième niveau doit comprendre d'une part le numéro du point de la liste parent et d'autre part sa propre numérotation dans un autre format.
Il vous faut tout d'abord définir une 
classe propre au premier niveau de la liste ol.niveau1 et fixer que le compteur de numérotation sera remis à zéro à chaque occurence de cette classe (réglage par défaut): counter-reset:Point_liste_niveau1;. Le nom du compteur est ici Point_liste_niveau1.
La mention list-style-type:none; sert en fait à empêcher la numérotation propre à HTML, étant donné que nous voulons la remplacer par la numérotation par les CSS:
ol.niveau1 {
counter-reset:Point_liste_niveau1;
list-style-type:none;
}
|
À l'étape suivante vous accédez pour les points de la liste du premier niveau ol.niveau1 li au
pseudo-format :before à l'aide duquel des textes peuvent être générés automatiquement.
Vous pouvez fixer le contenu du texte généré vec la propriété CSS content du pseudo-format :before.
Comme contenu, nous allons définir un compteur counter() et lui donner un nom Point_liste_niveau1,suivi d'un point et d'un espace entre guillemets (". ").
Avec la mention counter-increment:Point_liste_niveau1; vous incrémentez le compteur Point_liste_niveau1 de un.
Le reste de la définition pour les points de la liste du premier niveau aura cet aspect:
ol.niveau1 li:before {
content: counter(Point_liste_niveau1) ".";
counter-increment:Point_liste_niveau1;
}
|
Agissez semblablement pour le définition de la liste du deuxième niveau. Définissez d'abord une classe, puis la remise à zéro du compteur de numérotation, empêchez enfin la numérotation propre à HTML:
ol.niveau2 {
counter-reset:Point_liste_niveau2;
list-style-type:none;
}
|
La définition pour les points de la liste du deuxième niveau diffère maintenant quelque peu:
ol.niveau2 li:before {
content: counter(Point_liste_niveau1) counter(Point_liste_niveau2,lower-alpha) ".";
counter-increment:Point_liste_niveau2;
}
|
Il vous faut ici utiliser deux compteurs. Avec le premier compteur counter(Point_liste_niveau1) vous accédez au compteur du point de la liste parent.Avec le deuxième compteur, vous définissez un compteur propre aux points de la liste du niveau actuel tout en fixant le type de représentation de ce compteur: counter(Point_liste_niveau2,lower-alpha). À la suite de quoi suivent ici aussi un point et un espace entre guillemets (". "). Enfin vous incrémentez le nouveau compteur avec counter-increment:Point_liste_niveau2.
Au cas où vous ne fixez pour counter() que le nom du compteur, par exemple avec counter(Point_liste_niveau1), c'est automatiquement le format décimal qui sera pris pour la représentation du compteur
Si vous voulez ajoutez un autre niveau, la définition CSS pour une représentation telle que 1a1., 1a2., 1b1., 1b2. etc. aurait cet aspect:
ol.niveau3 {
counter-reset:Point_liste_niveau3;
list-style-type:none;
}
ol.niveau3 li:before {
content: counter(Point_liste_niveau1) counter(Point_liste_niveau2,lower-alpha) counter(Point_liste_niveau3) ". ";
counter-increment:Point_liste_niveau3;
}
|
À cette date, cette possibilité offerte par les CSS n'est soutenue que par Opera.
|
|
Les adresses qui suivent sont recommandées pour mieux comprendre l'exemples ci-dessus ou pour approfondir et apprendre d'autres possiblités.
HTML/XHTML, Listes
CSS, Définir des formats pour des classes
CSS, :before, :after (Pseudo-formats pour le texte généré automatiquement)
CSS, Numérotation automatique
W3C, Compteurs automatiques et numérotation
|
|
|
SELFHTML actuel Articles spécialisés Feuilles de style CSS
|