Trucsweb.com

Trucsweb.com

CSS

Liste à puce

RDFFav

CSS - Liste à puce avec puce vraiment personnalisée

Très populauire, cette technique à pourtant un défaut de taille que le SVG peut réglerListe à puce, liste, pictogramme, font, awesome, svgCSS - Liste à puce avec puce vraiment personnalisée

Check List par Catlac (Acrylique vernis satiné, 2021)
Check List par Catlac (Acrylique vernis satiné, 2021)

La liste à puce est souvent utilisée en HTML comme conteneur. Pour les menus, pour le design, etc. Il va sans dire qu’il s’agit dans ce tutoriel de reproduire une véritable liste à puce qui respecte les règles de l’Académie française ; -) En espérant qu’elle ne monétise pas son appellation contrôlée comme les fromages légendaires français (!)

Ce tutoriel est un simple truc CSS, c’est vrai. D’autre part, on retrouve cette fonctionnalité CSS un peu partout, vrai. Mais est-ce vraiment le cas? Peut-être pas, c’est pourquoi le mot-clé dans ce tutoriel est « vraiment »!


Méthode conventionnelle

Personnellement, j’utilise depuis des années la méthode conventionnelle qui consiste à supprimer la puce et à ajouter devant l’item, à l’aide du sélecteur ::before, le code Unicode du caractère de son choix. C’est simple, ça fonctionne très bien, tant et aussi longtemps que le texte d’un item ne s’étant pas sur plusieurs lignes :


<style>
ul.perso {
  /* Retirer la puce par défaut */
  list-style-type: none;
}
ul.perso li::before {
  /* Spécifier le caractère devant l’item */
  content: "*";
  /* Ajouter une petite marge */
  padding: 0 10px 0 0;
}
</style>

<ul class="perso">
  <li>Liste item 1</li>
  <li>Liste item 2</li>
  <li>Liste item 3</li>
  <li>Liste item 4</li>
  <li>Liste item 5</li>
</ul>
Résultat
  • Liste item 1
  • Liste item 2
  • Liste item 3
  • Liste item 4
  • Liste item 5

Simple, efficace, et comme on peut constater ça fonctionne. Mais il y a un défaut majeur avec cette technique. La deuxième ligne du contenu de l’item se retrouve sous la puce! Résultat, c’est n’importe quoi, ce n’est pas français et pourquoi utiliser une liste à puce dans ce cas? Un simple paragraphe avec une marge où le premier caractère serait un pictogramme ferait l’affaire.

  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pour pallier ce problème, ajouter une marge négative à gauche. C’est moins précis, mais c’est déjà ça.

<style>
ul.perso {
  list-style-type: none;
}
ul.perso li::before {
  content: "*";
  /* Ajouter une petite marge */
  margin:0 5px 0 -14px;
  padding: 0 10px 0 0;
}
</style>

<ul class="perso">
  <li>Liste item 1</li>
  <li>Liste item 2</li>
  <li>Liste item 3</li>
  <li>Liste item 4</li>
  <li>Liste item 5</li>
</ul>
  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Méthode conventionnelle avec SVG

Même exemple, à peine mieux et largement reprie, avec une image SVG. Ici avec la librairie de police de caractère Font Awesome 5. L’idée consiste à spécifier la police de caractères.

ul.perso {
  list-style-type: none;
}
ul.perso li::before {
  /* Exemple Font Awesome 5 */
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  padding: 0 10px 0 0;
}

ul.perso li::before {
  /* Exemple Font Awesome 4 */
  content: "\f00c";
  font-family: "FontAwesome";
  padding: 0 10px 0 0;
}
Résultat
  • Liste item 1
  • Liste item 2
  • Liste item 3
  • Liste item 4
  • Liste item 5

Et toujours le même résultat décevant... C’est pourtant l’exemple le plus fréquent!

  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

La meilleure méthode

C’est pourtant la méthode officielle, carrément changer l’attribut list-style-image!

ul.perso {
  list-style-image: url('crochet.svg');
}
Résultat
  • Liste item 1
  • Liste item 2
  • Liste item 3
  • Liste item 4
  • Liste item 5

  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Wow, voilà une véritable liste à puce. C’est pourtant simple. Dans mon exemple j’utilise un SVG pour égaler la qualité de l’exemple précédent. Mais ça peut être n’importe qu’elle image. Il y a toute foi un défaut majeur avec cette dernière méthode. La couleur. En effet, on ne peut pas changer de façon dynamique la couleur d’une image, même une image vectorielle. Il faut spécifier la couleur directement dans le fichier SVG. Ici en rouge :

/* Pictogramme SVG Bootstrap Icons v1.4.0 */
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-check" viewBox="0 0 16 16">
  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>

Méthode de la W3C

La W3C propose aussi une méthode semblable avec l’attribut background-image!

ul.perso {
  list-style-type: none;
}

ul.perso li {
  background: transparent url(crochet.svg) 0 3px no-repeat;
  padding: 0 0 5px 15px;
}
Résultat
  • Liste item 1
  • Liste item 2
  • Liste item 3
  • Liste item 4
  • Liste item 5

  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Méthode font Awesome

C’est aussi la bonne méthode, mais son défaut c’est le code. Il faut ajouter le pictogramme "en ligne" et même une balise supplémentaire dans le cas de Font Awesome 5! un code qui n’est pas portable, c’est moins pratique qu’une classe CSS :

/* Font Awesome 4 */
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Liste item 1</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 2</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 3</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 4</li>
</ul>

/* Font Awesome 5 */
<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 1</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 2</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 3</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 4</li>
</ul>

Résultat
  • Liste item 1
  • Liste item 2
  • Liste item 3
  • Liste item 4

  • Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS list-style-type

Ce tutoriel ne serait pas complet sans mentionner les types de puces déjà disponibles :

/* Liste partielle des types  */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;
Résultat
  • Liste item Disc
  • Liste item Circle
  • Liste item Square
  • Liste item Decimal
  • Liste item Georgian
  • Liste item Trad-chinese-informal
  • Liste item Kannada

Liste complète sur MDN Web Docs


Listes à puces stylisées

Pourquoi arrêter ici le plaisir! Une fois la puce retirée, tout est possible avec la liste à puces. Voilà quelques exemples de liste à puce stylisés glanés au fil des années.

Exemple avec un compteur
/* Liste numérique renversée */
ol.rond-rev {
  counter-reset: li;
  list-style: none;
  *list-style: decimal;
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 2em;
  margin-right:30px;
  margin-left:30px;
}
@media (min-width: 992px) {
  ol.rond-rev{
    margin-right:30px;margin-left:60px;
  }
}
ol.rond-rev ol{
  margin: 0 0 0 2em;
}
ol.rond-rev li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background-color: blue;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
}
ol.rond-rev li:hover{
  color:#fff;
  background: blue;transform: scale(1.02);
}
ol.rond-rev li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute;left: -1.3em;
  top: 50%;
  margin-top: -1em;
  background: #fff;
  height: 2em;
  width: 2em;
  line-height: 1.5em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  background-color: blue;
  color:#fff;
}
ol.rond-rev > li a {
  display:block;
  text-decoration:none;
  color:#eee!important;
}
ol.rond-rev > li a:hover {
  display:block;
  text-decoration:none;
  color:#fff!important;
}

Résultat
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 219 - Pages vues : 277
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@