list-style-type - Propriété CSS
Résumé des caractéristiques de la propriété list-style-type
disc
| none
| square
| disclosure-closed
| disclosure-open
| decimal
| decimal-leading-zero
| lower-latin
| upper-latin
| lower-alpha
| lower-roman
| upper-alpha
| upper-roman
| lower-greek
| upper-greek
disc
list-style-type
passe d'une valeur à l'autre sans transition.Description de la propriété list-style-type
.
Définit le type de puces ou de numérotation à utiliser pour les listes ( balises li ).
Cette propriété est inopérante si une image est définie par list-style-image
.
Les feuilles de styles des navigateurs définissent des puces par défaut pour les 3 premiers niveaux d'imbrication, qui sont
en général :
Une puce noire circulaire pour le premier niveau.
Une puce blanche circulaire pour le deuxième niveau.
Et un carré noir pour le troisième niveau et les suivants.
Remarque : list-style-type
est sans effet si une image a été définie par list-style-image
, ou si la propriété
content
est appliquée au pseudo-élément ::marker
avec la valeur none
.
Reportez-vous aussi à la page sur la directive @counter-style
qui permet de définir une numérotation
de façon très précise.
Et consultez également la propriété résumée list-style
.
Syntaxes de list-style-type
- Puces.
- list-style-type: disc;
- Un
- Deux
- Trois
Puce circulaire noire.
- list-style-type: circle;
- Un
- Deux
- Trois
Puce circulaire blanche.
- list-style-type: square;
- Un
- Deux
- Trois
Puce carrée noire.
- list-style-type: none;
- Un
- Deux
- Trois
Aucune puce, ni aucun numéro.
- list-style-type: decimal; list-style-type: decimal-leading-zero;
- Un
- Deux
- Trois
- Un
- Deux
- Trois
Numérotation décimale (classique), en chiffres.
La valeur
decimal-leading-zero
affiche toujours deux digits, les nombres de 1 à 9 étant précédés d'un zéro. Elle n'est pas bien reconnue par les navigateurs.La numérotation décimale commence avec le deuxième symbole (sachant que le premier symbole est le zéro), et se poursuit jusqu'au dernier symbole (le 9). Puis on recommence avec deux chiffres, en incluant cette fois-ci le premier symbole : le zéro.
- list-style-type: lower-roman; list-style-type: upper-roman;
- Un
- Deux
- Trois
- Un
- Deux
- Trois
Numérotation en chiffres romains minuscules ou majuscules.
- list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin;
- Un
- Deux
- Trois
- Un
- Deux
- Trois
Les numérotations
alpha
etlatin
sont synonymes. Ce sont des numérotations alphabétiques en caractères latin, minuscules ou majuscules.Les numérotations alphabétiques commencent avec le premier symbole (le
a
), se continue jusqu'au dernier symbole (lez
), puis reprend avec deux lettres, en recommençant au premier symbole. - list-style-type: armenian;
- Un
- Deux
- Trois
- Un
- Deux
- Trois
Numérotation en caractères nationaux. De très nombreuses langues sont reconnues :
armenian
cjk-ideographic
georgian
, etc. Reportez-vous au simulateur, en bas de cette page pour une liste plus complète et tester la compatibilité de votre navigateur. - list-style-type: '> ';
- Un
- Deux
- Trois
La chaîne de caractères spécifiée est utilisée comme puce. La valeur doit être indiquée entre apostrophes ou entre guillemets.
- list-style-type: symbols(alphabetic '⓵' '⓶' '⓷'); ⚠
- Un
- Deux
- Trois
- Un
- Deux
- Trois
La fonction
symbols()
permet de définir le type de numérotation et les caractères à utiliser pour la numérotation. Reportez-vous à la description de la fonctionsymbols()
.⚠ Certains navigateurs comme Chrome ne traite pas cette syntaxe. Utilisez plutôt une numérotation personnalisée avec
@counter-style
(voir ci-après). - list-style-type: cards;
- Un
- Deux
- Trois
- Quatre
- Cinq
Ici
cards
est le nom d'une numérotation personnalisée définie par@counter-style
. Avec la directive@counter-style
tout est paramétrable : le type de numérotation, les symboles à utiliser, un préfixe et un suffixe éventuels, etc.Le nom de l'énumération ne doit pas être spécifié entre guillemets ni apostrophes.
Ici nous avons choisi une numérotation numérique classique, mais les chiffres de 1 à 9 ont été remplacés par des cartes à jouer. Les numérotations numériques nécessitant une valeur 0, c'est le dos de la carte qui fera figure de valeur nulle.
- list-style-type:
initial
; list-style-type:inherit
; list-style-type:revert
; list-style-type:revert-layer
; list-style-type:unset
;La valeur initiale est :
.disc
Syntaxes de list-style-type
- Numérotations en langue latine.
Syntaxes de list-style-type
- Langues non latines.
Syntaxes de list-style-type
- Numérotations personnalisées.
Animation de la propriété list-style-type
.
L'animation de list-style-type
est possible.
En voici un petit exemple : l'animation est appliquée sur chacun des éléments li avec un délai au départ d'autant plus
important que l'élément est situé vers la fin de la liste. C'est ce qui provoque cet effet de glissement vers le bas.
- Un
- Deux
- Trois
- Quatre
- Cinq
Manipulation de la propriété list-style-type
par programme.
La liste ci-dessous (de trois éléments) est une balise ul. On voit que la modification de la valeur de list-style-type
est immédiatement répercutée sur l'affichage.
- Premier élément.
- Deuxième élément.
- Troisième élément.
Modifier la valeur de list-style-type
en Javascript.
En Javascript, voici comment modifier la valeur de list-style-type
.
On voit que Javascript propose une syntaxe avec la notation typique de css, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
(une majuscule pour séparer les mots) plus habituelle en Javascript.
function setListStyleType(el) {
el.style['list-style-type']='decimal';
// ou
el.style.listStyleType='decimal';
}
Lire en Javascript la valeur de list-style-type
.
Pour que ce code fonctionne, la propriété doit avoir été affectée dans le code HTML directement à l'élément lui-même via son attribut
style
, et non pas en passant par un sélecteur CSS.
function getListStyleType(el) {
alert(el.style['list-style-type']);
// ou
alert(el.style.listStyleType);
}
Lire la valeur calculée de list-style-type
en Javascript.
La valeur calculée résulte de l'évaluation de la cascade des héritages et des règles de priorité.
function getCalcListStyleType(el) {
alert(window.getComputedStyle(el).getPropertyValue('list-style-type'));
}
Modifier la valeur de la propriété list-style-type
avec JQuery.
function setListStyleType(el) {
$(el).css('list-style-type','lower-alpha');
// ou
$(el).css('listStyleType','lower-alpha');
}
Lire la valeur calculée de la propriété list-style-type
avec JQuery.
function getCalcListStyleType(el) {
alert($(el).css('list-style-type'));
// ou
alert($(el).css('listStyleType'));
}
Simulateur.
Sélectionnez un type de puce ou de numérotation pour list-style-type
et constatez le changement dans la liste de couleurs en dessous.
Les valeurs non supportées par votre navigateur actuel s'affichent en rouge.
A titre d'exemple nous avons ajouté deux numérotations personnalisées :
cards
: une numérotation numérique classique avec les chiffres remplacés par des cartes à jouer, le dos figurant la valeur 0.dices
: une numérotation alphabétique utilisant des dés à jouer pour représenter les valeurs.
- AliceBlue
- AntiqueWhite
- Aqua
- AquaMarine
- Azure
- Beige
- Bisque
- Black
- BlanchedAlmond
- Blue
- BlueViolet
- Brown
- BurlyWood
- CadetBlue
- Chartreuse
- Chocolate
- Coral
- CornflowerBlue
- Cornsilk
- Crimson
- Cyan
- DarkBlue
- DarkCyan
- DarkGoldenRod
- DarkGray
- DarkGreen
- DarkKhaki
- DarkMagenta
- DarkOliveGreen
- DarkOrange
- DarkOrchid
- DarkRed
- DarkSalmon
- DarkSeaGreen
- DarkSlateBlue
- DarkSlateGray
- DarkTurquoise
- DarkViolet
- DeepPink
- DeepSkyBLue
- DimGray
- DodgerBlue
- Feldspar
- FireBrick
- FloralWhite
- ForestGreen
- Fuchsia
- Gainsboro
- GhostWhite
- Gold
- GoldenRod
- Gray
- Green
- GreenYellow
- HoneyDew
- HotPink
- IndianRed
- Indigo
- Ivory
- Khaki
Prise en charge par les navigateurs (compatibilité).
La propriété list-style-type
est bien reconnue par les navigateurs actuels. Cependant, parmi la multitude de numérotations
en langues non latines, il reste des non compatibilités.
La fonction symbols()
pose également des problèmes sur de nombreux navigateurs.
list-style-type
.
symbols()
utilisée dans la syntaxe de list-style-type
pour définir les symboles utilisés pour la
numérotation.
list-style-type
symbols()
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-type
.
Les spécifications CSS éditées par le W3C sont organisées en modules. list-style-type
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.