`Marker-side` - Propriété CSS

marker-side

Résumé des caractéristiques de la propriété `marker-side`

Description rapide

Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Statut

Problèmes de compatibilité ⚠

S'applique à

Éléments de listes.

Utilisable sur

HTML

Valeurs prédéfinies

match-self | match-parent

Pourcentages

Ne s'appliquent pas.

Valeur initiale

match-self

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété marker-side passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Listes et compteurs

Références (W3C)

CSS Lists and Counters Module Level 3

Statut du document: WD (document de travail)

Schéma de la syntaxe de `marker-side`.

Schéma syntaxique de la propriété marker-side.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété `marker-side`.

Cette propriété marker-side définit le côté où se positionnera le marqueur de liste (puce, numéro...). Le marqueur peut se positionner à gauche où à droite du texte.

En principe le marqueur se positionne au début du texte, donc à gauche pour les langues européennes, et à droite pour les langues arabes. Dans le cas d'une liste combinant des éléments dans des langues avec des sens d'écriture différents, on peut souhaiter cependant que tous les marqueurs soient du même côté.

Valeurs pour `marker-side`.

marker-side: match-self;

Le marqueur se positionne du côté adapté à la langue de l'élément (en général une balise li). Si la liste comporte des éléments dans des langues différentes, on pourra donc avoir certains marqueurs à droite, et d'autres à gauche.
marker-side: match-parent;

Les marqueurs se positionnent du côté adapté à la langue de l'élément parent (en général une balise ul ou ol). Tous les marqueurs de la liste seront donc du même côté.
marker-side: initial; (match-self) marker-side: inherit; marker-side: revert; marker-side: revertLayer; marker-side: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `marker-side`.

Le simulateur présente une liste de trois éléments, dont deux sont écrits dans une langue latine, et un en langue arabe. Les puces se positionnent en fonction du sens d'écriture. On se retrouve donc avec des puces à gauche et une puce à droite. La propriété marker-side permet(tra) de résoudre ce problème.

marker-side :

match-self

match-parent

Ce texte est écrit de gauche à droite, comme dans les langues latines (du français en l'occurrence).
هذا النص مكتوب من اليمين إلى اليسار ، كما هو الحال في اللغات العربية.
Un nouveau texte en français, de gauche à droite.

Compatibilité des navigateurs avec `marker-side`.

La propriété marker-side est encore très peu reconnue par les navigateurs (2025). Il est prématuré de l'utiliser, d'autant plus qu'elle n'est pas souvent nécessaire.

Colonne 1

Support par les navigateurs de la propriété marker-side pour aligner les puces ou les numéros d'une liste.

Propriété
marker-side

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Firefox pour Androïd

Chrome

Edge

Safari

Opéra

Safari sur IOS

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `marker-side`.

Module CSS - Listes et compteurs - Niveau 3

Introduction de la propriété marker-side dans le niveau 3 de la spécification "Listes et compteurs".

20 Février 2002
Document de travail.

Voir aussi, au sujet des listes et compteurs.

La 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). La propriété marker-side et les propriétés ci-dessous sont décrites dans cette spécification :