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 syntaxique de `marker-side`.

Schéma syntaxique de la propriété marker-side
Les liens du schéma donnent accès à plus de détails
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é.

Valeurs communes à toutes les propriétés :


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.

Prise en charge par les navigateurs (compatibilité).

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

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 :