list-style - Propriété CSS
Résumé des caractéristiques de la propriété list-style
none
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 :
list-style-type
: le type de marqueur : puce, numéro, etc.list-style-image
: l'image à utiliser pour dessiner le marqueur.list-style-position
: l'emplacement du marqueur : dans le paragraphe, à l'extérieur, etc.
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.
list-style
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.