Modifier ou designer les puces des éléments de liste n’est pas forcément de tout repos. Aux côtés des images de fond, d’autres techniques, plus simples à maintenir, mais moins connues, existent.
Modifier ou designer les puces des éléments de liste n’est pas forcément un exercice de tout repos : nous avons souvent recours aux images de fond bien que d’autres techniques, plus simples à maintenir, mais moins connues, existent.
Faisons le tour des méthodes utilisables aujourd’hui, avec leurs avantages et inconvénients.
Viens découvrir mon <li>
Que savons-nous exactement de l’élément <li> ?
Sa fonction selon les spécifications HTML est de structurer un élément d’une liste ordonnée (dont l’ordre est pertinent) ou non ordonnée (dont l’ordre importe peu). Son parent direct est soit un élément <ul> (liste non ordonnée), soit un <ol> (liste ordonnée), et réciproquement les <ul> et <ol> ne peuvent contenir directement que des éléments <li> (pas de conteneur intermédiaire).
Il est possible d’assigner n’importe quelle valeur de display à n’importe quel élément HTML
En terme d’affichage – donc de rendu CSS par défaut – les éléments <li> ressemblent fortement à des éléments de type block tout en bénéficiant de particularités. Et pour cause, leur valeur de display par défaut n’est pas block mais list-item.
Les caractéristiques des éléments list-item sont :
Ils se placent toujours l’un en dessous de l’autre par défaut (comme un retour chariot),
Ils occupent automatiquement, par défaut, toute la largeur disponible dans leur parent,
Ils peuvent être dimensionnés à l’aide des propriétés telles que width, height, min-width, min-height…
Ils peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position…).
N’hésitez pas à en découvrir plus sur les différents types d’affichage par défaut.
Dans la pratique, il est possible d’assigner n’importe quelle valeur de display à n’importe quel élément HTML : ainsi, une liste peut s’afficher horizontalement si ses éléments <li> sont rendus en display: inline. De même un paragraphe peut disposer de puces s’il est affiché en display: list-item.
Les basiques : list-style
Les propriétés list-style-type et list-style-image existent depuis la version initiale de CSS, en 1996. Elles permettent de modifier le visuel de la puce associée aux éléments de liste <li>.
list-style-type
La propriété list-style-type définit l’aspect de la puce sous forme graphique (glyphe) ou numérique pour les listes numérotées :
Les valeurs de glyphes sont disc, circle et square.
Les valeurs pour les systèmes de numérotation sont : decimal, lower-roman, upper-roman, hebrew, armenian, katakana, etc.
La valeur supprimant la puce est none.
Vous en conviendrez avec moi : les options graphiques sont plutôt restreintes et les choix sont vite faits.
list-style-image
La propriété list-style-image offre la possibilité de remplacer la puce classique par une image dont vous aurez indiqué le chemin.
Là encore, le périmètre créatif se révèle limité, notamment parce qu’il n’est pas vraiment possible de positionner l’image précisément (même avec list-style-position), il faut généralement retailler ou redimensionner l’image.
L’image de fond : background-image
À l’instar de n’importe quel élément HTML, les items de liste ont la faculté de pouvoir disposer d’image d’arrière-plan grâce à la propriété background-image.
Il est ainsi possible de remplacer la puce initiale par l’image de son choix :
Cette méthode présente certains atouts mais également des faiblesses par rapport à l’usage de list-style-image :
L’inconvénient principal est que si l’image de fond est plus haute que le contenu de la puce, une partie sera masquée. Il faut donc prévoir à l’avance la hauteur minimale de la puce.
L’avantage est que background-position permet de placer l’image de fond au pixel près, puisque rien n’empêche des déclarations telles que background-position: 0 3px; ou encore background-position: 5% 10%;
Les informations recueillies sont destinées à CCM Benchmark Group pour vous assurer l’envoi de votre newsletter.
Elles seront également utilisées sous réserve des options souscrites, par CCM Benchmark Group à des fins de ciblage publicitaire et prospection commerciale au sein du Groupe Le Figaro, ainsi qu’avec nos partenaires commerciaux.
Le traitement de votre email à des fins de publicité et de contenus personnalisés est réalisé lors de votre inscription sur ce formulaire. Toutefois, vous pouvez vous y opposer à tout moment
Plus généralement, vous bénéficiez d’un droit d’accès et de rectification de vos données personnelles, ainsi que celui d’en demander l’effacement dans les limites prévues par la loi.
Vous pouvez également à tout moment revoir vos options en matière de prospection commerciale et ciblage. En savoir plus sur notre politique de confidentialité ou notre politique Cookies.