List-style-position - Propriété CSS

list-style-position

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

Description rapide
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Statut
Standard
S'applique à
Éléments de listes.
Utilisable sur
HTML
Valeurs prédéfinies
outside | inside
Pourcentages
Ne s'appliquent pas.
Valeur initiale
outside
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété list-style-position passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de list-style-position.

list-style-position - Syntax DiagramSyntax diagram of the list-style-position CSS property. inside inside outside outsidelist-style-position:;list-style-position:;
Schéma syntaxique de la propriété list-style-position
Les liens du schéma donnent accès à plus de détails

Description de la propriété list-style-position.

Définit la position des puces ou des numéros dans une liste ( balises li ). Les puces ou numéros peuvent être inclus dans le paragraphe, ou décalés pour figurer à l'extérieur du paragraphe.

Dans tous les cas, puces et numéros se positionnent en début de la ligne, compte-tenu du sens d'écriture, c'est à dire du côté inline-start. La toute récente propriété marker-side permettra de changer cela. Reportez-vous aussi à la page sur la propriété résumée list-style.

Prise en charge de la langue.

Les marques de liste (puces, numéro...) sont toujours placés du coté start. La prise en charge du mode d'écriture en fonction de la langue est donc systématique.

Valeurs pour list-style-position.

  • list-style-position: outside;

    Les puces ou les numéros se positionnent dans la marge du paragraphe, en retrait. Puces et numéros sont positionnés du côté inline-start (début de ligne).

    list-style-position avec la valeur outside
  • list-style-position: inside;

    Les puces ou les numéros se positionnent dans le paragraphe, en repoussant la première ligne de texte.

    list-style-position avec la valeur inside

Valeurs globales
(communes à toutes les propriétés)

list-style-position: initial (outside) list-style-position: inherit list-style-position: revert list-style-position: revertLayer list-style-position: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de list-style-position.

L'animation de list-style-position est possible mais d'un intérêt très limité.

Accéder à la propriété list-style-position par programme.

Modifier la valeur de list-style-position en Javascript.

Javascript accepte deux syntaxes pour l'écriture du nom de la propriété : la notation en kebab-case, typique de CSS (un tiret pour séparer les mots), et la notation en camel-case (une majuscule pour séparer les mots).

Javascript
let el = document.getElementById('id'); el.style['list-style-position'] = 'inside'; // ou let el = document.getElementById('id'); el.style.listStylePosition = 'inside';

Lire en Javascript la valeur de list-style-position.

Le code ci-après retrouve la valeur de list-style-position si cette dernière a été affectée dans le code HTML, avec l'attribut style. Les valeurs initialisées dans la feuille de styles via un sélecteur CSS ne sont pas prises en compte par ce code.

Javascript
let el = document.getElementById('id'); let value = el.style['list-style-position']; // ou let el = document.getElementById('id'); let value = el.style.listStylePosition;

Lire la valeur calculée de list-style-position en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Si list-style-position n'a reçu aucune valeur, sa valeur calculée est la valeur initiale de la propriété (outside dans le cas de list-style-position).

Modifier la valeur de la propriété list-style-position avec JQuery.

Comme en Javascript, le nom de la propriété peut être spécifié indifféremment en kebab-case ou en camel-case.

JQuery

$('#id').css('list-style-position', 'inside');
// ou
$('#id').css('listStylePosition', 'inside');

Lire la valeur calculée de la propriété list-style-position avec JQuery.

JQuery
let value = $('#id').css('list-style-position');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent une valeur à la propriété list-style-position et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée.

Exemple interactif avec la propriété list-style-position.

Mode d'écriture :
list-style-position :

Les avantages des feuilles de style CSS sont multiples :

  • Il y a une séparation totale entre les informations et leur présentation : données et présentation sont des fichiers séparés. Ce qui facilite la séparation les tâches entre le développeur et le designer.
  • La conception et la construction du document peut se faire sans se soucier de la présentation.
  • La présentation du site internet est uniformisée, dans la mesure où les pages HTML font toutes référence aux mêmes feuilles de styles. Ce qui permet de plus des modifications rapides de la présentation d'un site web.
  • Plusieurs feuilles de styles peuvent être associées à un même document : une pour visualiser la page sur l'écran, une pour l'impression, une pour un affichage sur mobile, etc.
  • Le code HTML est réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation.

Compatibilité des navigateurs avec list-style-position.

Aucun problème à signaler au sujet de la prise en charge de la propriété list-style-position, à part une petite particularité sur Safari  .

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-position
Estimation de la prise en charge globale.
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

Histoire de la propriété list-style-position.

La définition de la propriété list-style-position est restée inchangée depuis la toute première version de CSS.

Voir aussi, au sujet des listes et compteurs.

La description de la propriété list-style-position figure dans le module de spécification qui regroupe les définitions concernant les listes à puces et les listes numérotées s'appelle CSS Lists and Counters Module (Module CSS - Listes et compteurs). Les propriétés ci-dessous sont également décrites dans ce module :

Propriétés :

counter-increment
Définit le pas d'incrémentation d'un compteur.
counter-reset
Initialise un compteur.
counter-set
Change la valeur d'un ou de plusieurs compteurs.
list-style
Résumé des caractéristiques de listes à puces ou à numéros.
list-style-image
Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
list-style-type
Définit le type des puces ou de la numérotation.
⚠
marker-side
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions :

counter()
Renvoie la valeur actuelle d'un compteur. Ce dernier est géré par les propriétés counter-reset, counter-set et counter-increment.
counters()
Renvoie la valeur d'un compteur hiérarchique.