12.6 Les marqueurs et les listes
12.6.2 Les listes : les propriétés 'list−style−type', 'list−style−image',
Les propriétés de liste permettent une mise en forme limité des listes. Tout comme les marqueurs, au champs d'action plus étendu, un élément dont la propriété 'display' a la valeur 'list−item' génère une boîte principale pour son contenu ainsi qu'une boîte de marqueur facultative. Les propriétés de liste permettent de préciser le type (image, glyphe ou nombre) et la position d'une boîte de marqueur par rapport à la boîte principale (à l'extérieur, ou à l'intérieur avant le contenu). Par contre, celles−ci ne permettent pas de spécifier un style distinct (de couleur, de police, d'alignement, etc.) pour le marqueur de liste ou la position de celui−ci par rapport à la boîte principale.
De plus, si on utilise un marqueur M (créé par 'display: marker') avec un item de liste créé par ces propriétés de liste, le marqueur M remplace le marqueur normal d'item de liste.
En employant les propriétés de liste, les propriétés d'arrière−plan ne s'appliquent qu'à la boîte principale, la boîte de marqueur en dehors restant transparente. Les marqueurs autorisent un plus grand contrôle sur le style d'une boîte de marqueur.
'list−style−type'
Valeur :
disc | circle | square | decimal | decimal−leading−zero | lower−roman | upper−roman | lower−greek | lower−alpha | lower−latin | upper−alpha | upper−latin | hebrew | armenian | georgian | cjk−ideographic | hiragana | katakana | hiragana−iroha | katakana−iroha | none | inherit
Initiale : disc S'applique à
: ceux des éléments dont la valeur de la propriété 'display' est 'list−item' Héritée : oui
Pourcentage
: sans objet
Médias : visuel
Cette propriété spécifie l'aspect du marqueur d'item de liste, quand la propriété 'list−style−image' a la valeur 'none' ou quand l'image sur laquelle pointe l'URI n'est pas disponible. La valeur 'none' spécifiant l'absence de marqueur, trois types de marqueurs existent autrement : à partir de glyphes, de systèmes de numérotation et de systèmes alphabétiques. Note : Les listes numérotées sont plus accessibles, la navigation à l'intérieur de celles−ci étant plus facile.
Les valeurs de glyphes sont disc, circle et square. Leur rendu exact dépend de l'agent utilisateur.
Les valeurs pour les systèmes de numérotation sont : decimal
Des nombres décimaux, commençant à partir de 1 ; decimal−leading−zero
Des nombres décimaux, flanqués d'un zéro initial (ex. 01, 02, 03, ..., 98, 99) ; lower−roman
Des chiffres romains minuscules (i, ii, iii, iv, v, etc.) ; upper−roman
Des chiffres romains majuscules (I, II, III, IV, V, etc.) ; hebrew
Numérotation en hébreu traditionnel (Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...) ; georgian
Numérotation en georgien traditionnel (an, ban, gan, ..., he, tan, in, in−an, ...) ; armenian
Quand un agent utilisateur ne reconnaît pas un système de numérotation, celui−ci devrait se rabattre sur 'decimal'.
Note : Cette spécification ne précise pas de mécanisme exact pour chacun des systèmes de numérotation (ex.
comment calculer les chiffres romains). Une note ultérieure du W3C pourrait apporter des éclaircissements sur ceux−ci.
Les valeurs pour les systèmes alphabétiques sont : lower−latin or lower−alpha
Des lettres ASCII minuscules (a, b, c, ..., z) ; upper−latin or upper−alpha
Des lettres ASCII majuscules (A, B, C, ..., Z) ; lower−greek
Des lettres greques classiques alpha, beta, gamma, ... (-, ®, ¯, ...).
Cette spécification ne définit pas comment se comportent les systèmes alphabétiques à la fin de l'alphabet. Par exemple, au−delà de 26 items de liste, le rendu pour 'lower−latin' est indéfini. C'est pourquoi, pour de longues listes, on recommande de choisir des nombres véritables.
Soit le document HTML suivant :
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Numérotation en chiffres romains minuscules</TITLE>
<STYLE type="text/css">
OL { list−style−type: lower−roman } </STYLE>
</HEAD>
<BODY>
<OL>
<LI> Le premier item.
<LI> Le deuxième item.
<LI> Le troisième item.
</OL>
</BODY>
</HTML>
celui−ci pourrait apparaître ainsi :
i Le premier item.
ii Le deuxième item.
iii Le troisième item.
Noter que l'alignement des marqueurs de liste (ici, en justification à droite) dépend de l'agent utilisateur.
Note : Les versions ultérieures de CSS pourraient apporter d'autres styles de numérotation.
'list−style−image'
Valeur : <uri> | none | inherit Initiale : none
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list−item' Héritée : oui
Pourcentage : sans objet Médias : visuel
Cette propriété désigne l'image qui sera employée comme marqueur d'item de liste. Quand l'image est disponible, elle remplace le marqueur produit par la propriété 'list−style−type'.
Exemple(s) :
Cet exemple place l'image "ellipse.png" comme marqueur au début de chacun des items de liste :
UL { list−style−image: url("http://png.com/ellipse.png") }
'list−style−position'
Valeur : inside | outside | inherit Initiale : outside
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list−item' Héritée : oui
Pourcentage : sans objet Médias : visuel
Cette propriété spécifie l'emplacement de la boîte de marqueur dans la boîte de bloc principale. Les significations des valeurs sont :
outside
La boîte de marqueur est placée en dehors de la boîte de bloc principale. Note : CSS1 ne donnait pas l'emplacement exact de la boîte de marqueur, cette ambiguïté reste en CSS2 pour des raisons de compatibilité. Pour un contrôle plus fin de la position des boîtes des marqueurs, utiliser 'marker' ; inside
La boîte de marqueur devient la première boîte en−ligne de la boîte de bloc principale, le contenu de l'élément s'écoulant après celle−ci.
Par exemple :
<HTML>
<HEAD>
<TITLE>Comparaison entre les emplacements 'inside' et 'outside'</TITLE>
<STYLE type="text/css">
UL { list−style: outside } UL.compact { list−style: inside } </STYLE>
</HEAD>
<BODY>
<UL>
<LI>le premier item vient d'abord <LI>le second item vient ensuite </UL>
<UL class="compact">
<LI>le premier item vient d'abord <LI>le second item vient ensuite </UL>
</BODY>
</HTML>
Ceci pourrait être rendu ainsi :
Dans un texte lu de droite à gauche, les marqueurs auraient été placées au côté droit de la boîte.
'list−style'
Valeur : [ <'list−style−type'> || <'list−style−position'> || <'list−style−image'> ] | inherit Initiale : non définie pour les propriétés raccourcies
S'applique à : ceux des éléments dont la propriété 'display' a la valeur 'list−item' Héritée : oui
Pourcentage : sans objet Médias : visuel
La propriété raccourcie 'list−style' sert à réunir les trois propriétés 'list−style−type', 'list−style−image' et 'list−style−position' dans la feuille de style.
Exemple(s) :
UL { list−style: upper−roman inside } /* Pour tous les éléments UL */
UL LI > UL { list−style: circle outside } /* Pour tous les éléments UL qui sont enfants d'un élément LI */
Bien qu'on puisse spécifier directement l'information de 'list−style' aux éléments d'item de liste (ex. l'élément LI en HTML), ceci requiert un soin particulier. Les deux règles suivantes semblent identiques, cependant la première comporte un sélecteur descendant et la seconde, un sélecteur d'enfant (plus spécifique) :
OL.alpha LI { list−style: lower−alpha } /* Tous les éléments LI descendant d'un élément OL */
OL.alpha > LI { list−style: lower−alpha } /* Tous les éléments LI enfant d'un élément OL */
Les auteurs, employant seulement le sélecteur descendant, pourraient ne pas obtenir le résultat escompté.
Considérons ces règles :
<HTML>
<HEAD>
<TITLE>ATTENTION : Résultats inattendus, du fait de la cascade</TITLE>
<STYLE type="text/css">
OL.alpha LI { list−style: lower−alpha } UL LI { list−style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>niveau 1 <UL>
<LI>niveau 2 </UL>
</OL>
</BODY>
</HTML>
L'aspect souhaité aurait été d'avoir les items de liste du niveau 1 avec des marqueurs 'lower−alpha' et les items de liste du niveau 2 avec des marqueurs 'disc'. Cependant, l'ordre de la cascade va faire que la première (qui inclut une information de classe spécifique) masquera la seconde. L'emploi d'un sélecteur d'enfant dans la règle suivante amène au résultat attendu :
OL.alpha > LI { list−style: lower−alpha } UL LI { list−style: disc }
Une autre solution aurait été de spécifier l'information de 'list−style' seulement aux éléments de type de liste :
OL.alpha { list−style: lower−alpha } UL { list−style: disc }
Les éléments LI vont hériter des valeurs de la propriété 'list−style' au travers des éléments OL et UL. On recommande cette manière de faire pour spécifier le style des listes.
Exemple(s) :
On peut combiner une valeur d'URI avec chacune des autres valeurs, comme :
UL { list−style: url("http://png.com/ellipse.png") disc }
Dans cet exemple, la valeur 'disc' sera employée en cas d'indisponibilité de l'image.
Quand on spécifie la valeur 'none' pour la propriété 'list−style', les propriétés 'list−style−type' et 'list−style−image' prennent toutes deux cette même valeur 'none' :
UL { list−style: none }
Aucun marqueur d'item de liste n'est affichée.