List-style - Propriété CSS

Description de la propriété list-style.

list-style définit l'ensemble des paramètres de présentation des listes (balises li). Cette propriété s'applique principalement aux containers de liste : les balises ul (listes à puces) et ol (listes numérotées), mais elle peut être utilisée également sur la balise li.

list-style est une propriété résumée qui regroupe les valeurs des propriétés suivantes :

• list-style-position : l'emplacement du marqueur : dans le paragraphe, à l'extérieur, etc.
• list-style-image : l'image à utiliser pour dessiner le marqueur.
• list-style-type : le type de marqueur : puce, numéro, etc.

Les valeurs pour le type et pour l'image sont incompatibles. Si les deux sont indiquées, ce sera l'image qui sera utilisée. D'autre part, le marqueur (puce ou numéro) ne sera pas affiché si la propriété content appliquée au pseudo-élément ::marker a la valeur none.

L'ordre des valeurs n'a pas vraiment d'importance. Cependant la valeur none s'applique aussi bien à list-style-image qu'à list-style-type. Lorsque cette valeur est utilisée dans la syntaxe de list-style, il est convenu qu'elle s'applique à celle des deux propriétés qui ne reçoit pas de valeur dans cette même règle.

Comme toutes les propriété résumée, list-style initialise les trois valeurs, même si elles ne sont pas toutes précisées.

Prise en charge de la langue.

Les puces ou les numéros de liste sont toujours positionnés du coté start, donc à gauche pour les langues latines, et à droite pour les langues arabes. La prise en charge du mode d'écriture en fonction de la langue se fait donc sans qu'il soit besoin de préciser quoi que ce soit.

On peut cependant s'intéresser à la propriété marker-side qui permet de préciser l'emplacement des marqueurs de liste.

Exemples avec list-style.

Les quelques exemples ci-dessous illustrent quelques unes des possibilités de list-style.

• Sur le troisième exemple, nous avons utilisé le pseudo-élément ::marker pour formater la numérotation.
• L'exemple numéro 5 montre qu'il est possible d'appliquer list-style sur un élément de la liste et non pas sur le container ul. Ceci permet d'avoir un marqueur différent sur une ou plusieurs des lignes.
• Le dernier exemple montre deux listes imbriquées. La feuille de styles du navigateur définit des marqueurs différents pour au moins les trois premiers niveaux, en général avec un code comme ci-après. Mais il est bien sur possible de modifier ces valeurs par défaut. L'exemple 6 définit des numérotations différentes en fonction du niveau d'imbrication.
   
  /* Extrait de la feuille de styles du navigateur : */ ul {list-style-type: disc;} ul ul {list-style-type: circle;} ul ul ul {list-style-type: square;}

Exemple d'animation de list-style.

Reportez-vous aux propriétés individuelles pour des exemples d'animation.

Compatibilité des navigateurs avec list-style.

list-style est une propriété ancienne qui est très bien prise en charge par tous les navigateurs.

Remarques :

(1) Si un bloc est le premier enfant d'une liste déclarée list-style-position:inside, alors le marqueur est sur la même ligne que le bloc

1

Propriété
list-style

2

Propriété
list-style-type

3

Propriété
>list-style-image

4

Propriété
list-style-position

Estimation de la prise en charge globale.

96%

96%

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

1

Safari sur IOS

1

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété list-style.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant list-style. Définition initiale de la propriété résumée list-style.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant list-style. Pas de changement concernant la propriété list-style.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Listes et compteurs - Niveau 3

  Concernant list-style. Pas de changement concernant la propriété list-style, mais ajout de nombreux styles de compteurs, décrits dans un module de spécification séparé.
  

  20 Février 2002

  Document de travail.

  

  

  

• Module CSS -Stylisation des compteurs - Niveau 3

  Concernant list-style. Module spécifique à la description des styles de compteurs et des numérotations internationales.
  

  09 Octobre 2012

  Document de travail.

  

  03 Février 2015

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des listes et compteurs.

Le module de spécification qui regroupe les définitions concernant les listes à puces et les listes numérotées s'appelle Module CSS - Listes et compteurs (Module CSS - Listes et compteurs). La propriété list-style et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :

Fonctions :