Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

list-style - Propriété CSS

list-style

Résumé des caractéristiques de la propriété list-style

Description rapide
Résumé des caractéristiques de listes à puces ou numérotées.
Statut
Standard
S'applique à
Éléments de listes.
Type de valeur
Voir les propriétés individuelles.
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Voir les propriétés individuelles.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

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 :

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.

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.

list-style: inside;


list-style-type: initial; /* disc */ list-style-image: initial; /* none */ list-style-position: inside;

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;}
  • HTML est un langage de structuration de l'information.
  • CSS est un langage de mise en forme de l'information.

  • HTML est un langage de structuration de l'information.
  • CSS est un langage de mise en forme de l'information.

  • HTML est un langage de structuration de l'information.
  • CSS est un langage de mise en forme de l'information.

  • HTML est un langage de structuration de l'information.
  • CSS est un langage de mise en forme de l'information.

  • HTML est un langage de structuration de l'information.
  • CSS est un langage de mise en forme de l'information.
  • SVG est un langage graphique.

  • langages de structuration de l'information :
    • HTML.
    • XML.
  • Langage de mise en forme :
    • CSS.

Animation de la propriété list-style.

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

Prise en charge par les navigateurs (compatibilité).

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

1
list-style
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que list-style.

Les spécifications CSS éditées par le W3C sont organisées en modules. list-style fait partie du Module CSS - Listes et compteurs (CSS Lists and Counters Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit le pas d'incrémentation d'un compteur.
Initialise un compteur.
Change la valeur d'un ou de plusieurs compteurs.
Définit une image à utiliser à la place des puces.
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Définit le type des puces ou de la numérotation.
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions.

Renvoie la valeur actuelle d'un compteur.
Renvoie la valeur d'un compteur hiérarchique.