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-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.
Type de valeur
Valeur prédéfinie
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:: Ancienne norme, obsolète

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.

insideinsideoutsideoutside
     
  • list-style-position: outside;
    list-style-position avec la valeur 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: inside;
    list-style-position avec la valeur inside

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

  • list-style-position: initial; list-style-position: inherit; list-style-position: revert; list-style-position: revert-layer; list-style-position: unset;

    La valeur initiale est : outside.

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

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

Manipulation de la propriété list-style-position par programme.

Les codes ci-après s'appliquent à la liste de deux éléments présentée ci-dessous (balise ul). Les modifications de la valeur de list-style-position sont immédiatement répercutées sur la mise en page.

  • Premier élément
    de la liste.
  • Deuxième élément
    de la liste.

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).


function setListStylePosition(el) {
el.style['list-style-position']='inside';
// ou
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.


function getListStylePosition(el) {
alert(el.style['list-style-position']);
// ou
alert(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).


function getCalcListStylePosition(el) {
alert(window.getComputedStyle(el).getPropertyValue('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.


function setListStylePosition(el) {
$(el).css('list-style-position','outside');
// ou
$(el).css('listStylePosition','outside');
}

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


function getCalcListStylePosition(el) {
alert($(el).css('list-style-position'));
// ou
alert($(el).css('listStylePosition'));
}

Simulateur.


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.

Prise en charge par les navigateurs (compatibilité).

Aucun problème à signaler au sujet de la prise en charge de la propriété list-style-position.

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

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-position.

Les spécifications CSS éditées par le W3C sont organisées en modules. list-style-position 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.
Résumé des caractéristiques de listes à puces ou numérotées.
Définit une image à utiliser à la place des puces.
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.