Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Conseils & astuces CSS pour Web Style Sheets

Voir aussi l'index de tous les conseils.

Sur cette page :

Puces colorées

Avez-vous déjà voulu faire une liste avec les puces d'une couleur différente de celle du texte, comme dans cet exemple ?

Un jour, le sélecteur '::marker' passera peut-être du stade de proposition au stade de standard et vous pourrez juste mettre '::marker {color: red}'. Mais pour l'instant vous pouvez simuler l'effet en combinant une poignée de propriétés.

Vous pouvez créer une image et utiliser: 'list-style: url (mybullet.png)'. Cela vous donne un contrôle total sur la couleur et la forme de la puce. Mais si vous voulez une taille de police plus grande ou plus petite, vous devrez créer une nouvelle image. Idem si vous voulez une couleur différente.

Nous préférons donc utiliser du texte que nous pouvons styler, en particulier une puce telle que • ou ◦ ou ▪. Nous devons remplacer le marqueur de l'élément de la liste, que nous ne pouvons pas sélectionner, par une puce que nous générons et nous stylisons nous-mêmes. Pour cela, nous supprimons le style de liste et utilisons ':: before' pour ajouter notre propre puce. Commencez par supprimer le style de la liste : 

ul {list-style: none}

Ensuite, nous générons notre propre puce : 

li::before {content: "•"; color: red}

On a donc inséré une puce rouge, mais pas au même endroit que la puce originale. Nous devons la déplacer vers la gauche, mais sans déplacer le texte de l'élément de la liste après celui-ci. Une façon d'y parvenir est de transformer notre puce en un 'inline-block' d'une taille donnée, disons 1em, puis de la déplacer vers la gauche par les dimensions qui lui sont propres : 

li::before {content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

Et c'est tout.

Soit dit en passant, si vous avez des soucis pour taper ces puces dans vos feuilles de style, vous pouvez juste utiliser leur référence Unicode : • = "\2022", ◦ = \25E6" and ▪ = "\25AA"

Numéros de liste colorés

Et les listes numérotées ? Le principe est le même : il faut remplacer le compteur automatique qui ne peut pas être stylé par un autre. En dehors des propriétés ci-dessus, il faut également créer un compteur. Supposons que nous utilisions un compteur appelé 'li'. Nous le mettons d'abord à zéro sur l'élément OL : 

ol {list-style: none; counter-reset: li}

Et puis nous faisons comme avec la puce ci-dessus : 

li::before {content: counter(li); color: red;
  display: inline-block; width: 1em;
  margin-left: -1em}

Il manque encore quelque chose : comme c'est notre propre compteur, if faut aussi l'augmenter : 

li {counter-increment: li}

Le résultat ressemble à ceci :

  1. First item
  2. Second item

Peut-être que ça vous suffit, mais si vous avez plus de neuf éléments, cela ressemble à ceci :

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
  6. Sixth item
  7. Seventh item
  8. Eighth item
  9. Ninth item
  10. Tenth item

alors que vous préféreriez probablement ceci :

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
  6. Sixth item
  7. Seventh item
  8. Eighth item
  9. Ninth item
  10. Tenth item

Pour cela il faut faire quatre changements : déplacer les nombres un peu plus à gauche et ajouter ce montant comme marge sur la droite, aligner à droite les numéros de la liste et définir la direction du texte avec 'rtl'. Pourquoi le 'rtl' ? Je vais l'expliquer ci-dessous. 

  .example ol li::before {content: counter(li); color: red;
    display: inline-block; width: 1em; margin-left: -1.5em;
    margin-right: 0.5em; text-align: right; direction: rtl}

Nous mettons les nombres dans un encadré de 1em de large et les alignons sur la droite. Mais si les nombres sont plus larges que l'encadré, ils ne seront pas alignés à droite, mais alignés à gauche. Il ne faut pas que le texte déborde d'un encadré sur le côté gauche dans CSS... à moins que ce ne soit du texte dans une langue écrite de droite à gauche, comme de l'hébreu ou de l'arabe. Les chiffres ne sont pas en hébreu ou en arabe et donc ils ne vont pas de droite à gauche, mais en disant que notre encadré suit les règles du texte de droite à gauche, nous laissons les nombres déborder sur la gauche et ainsi rester correctement aligné sur la droite.

(Si vous ne voulez pas ajouter la 'direction: rtl', vous pouvez l'omettre et utiliser à la place une plus grande largeur et une marge gauche, par exemple, 'width: 2em, margin-left: -2.5em'. Cela devrait vous donner assez d'espace pour aligner correctement les nombres jusqu'à 999.)

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2023 W3C® Privacy policy

Created 17 January 2001;
Last updated lun. 11 sept. 2023 17:40:36

Langues

À propos des traductions