list-style-position - Propriété CSS
Résumé des caractéristiques de la propriété list-style-position
outside
| inside
outside
list-style-position
passe d'une valeur à l'autre sans transition.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: 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.
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
.
list-style-position
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.