8 septembre 2025Français

Explorez les styles de compteurs CSS pour l'internationalisation (i18n) et découvrez comment formater les nombres et les listes dans différentes langues et contextes culturels pour un public mondial.

Prise en charge du langage de style de compteur CSS : mise en forme d'internationalisation pour les publics mondiaux

Dans le monde interconnecté d'aujourd'hui, les développeurs web doivent créer des sites web et des applications qui s'adressent à des publics divers. Cela signifie qu'il faut tenir compte non seulement de la langue, mais aussi des conventions culturelles et des systèmes de numérotation utilisés dans différentes régions. Les styles de compteurs CSS offrent un mécanisme puissant pour formater les listes et autres contenus numérotés d'une manière qui respecte ces nuances culturelles. Ce guide complet explorera les capacités des styles de compteurs CSS pour l'internationalisation (i18n) et démontrera comment les utiliser efficacement.

Comprendre les styles de compteurs CSS

Les compteurs CSS sont des variables gérées par les règles CSS pour suivre le nombre de fois qu'elles sont utilisées. Ils sont principalement utilisés pour numéroter les listes, les titres et autres éléments. Les styles de compteurs CSS étendent cette fonctionnalité en vous permettant de définir des systèmes de numérotation personnalisés au-delà des chiffres arabes et romains standard. Ceci est crucial pour prendre en charge différentes langues et préférences culturelles.

Les propriétés CSS de base impliquées dans l'utilisation des styles de compteurs sont :

counter-reset : Initialise ou réinitialise un compteur à une valeur spécifique.
counter-increment : Incrémente la valeur d'un compteur.
content : Utilisé avec les pseudo-éléments ::before ou ::after pour afficher la valeur du compteur.
counter() ou counters() : Fonctions utilisées dans la propriété content pour formater la valeur du compteur.
@counter-style : Définit un style de compteur personnalisé avec diverses propriétés pour contrôler le formatage.

La puissance de @counter-style

La règle @counter-style est au cœur de l'internationalisation des styles de compteurs CSS. Elle vous permet de définir un système de numérotation personnalisé avec diverses propriétés qui contrôlent la façon dont la valeur du compteur est rendue. Examinons les propriétés clés de la règle @counter-style :

system : Spécifie l'algorithme utilisé pour générer la représentation du compteur. Les valeurs courantes incluent cyclic, numeric, alphabetic, symbolic, fixed et additive.
symbols : Définit les symboles utilisés par le style de compteur, tels que les nombres, les lettres ou les caractères personnalisés.
additive-symbols : Utilisé avec le système additive pour définir les symboles et leurs valeurs numériques correspondantes.
suffix : Spécifie le texte ajouté après chaque représentation du compteur (par exemple, un point ou une parenthèse fermante).
prefix : Spécifie le texte ajouté avant chaque représentation du compteur.
range : Restreint la plage de valeurs pour laquelle le style de compteur est applicable.
pad : Spécifie le nombre minimal de chiffres à utiliser, en ajoutant des zéros non significatifs si nécessaire.
speak-as : Contrôle la façon dont la valeur du compteur est annoncée par les lecteurs d'écran pour l'accessibilité.
fallback : Spécifie un style de compteur de secours à utiliser si le style actuel n'est pas pris en charge par le navigateur.

Exemples d'internationalisation avec @counter-style

Maintenant, explorons quelques exemples pratiques d'utilisation de @counter-style pour formater les compteurs pour différentes langues et contextes culturels.

1. Chiffres arabes avec des chiffres arabo-indiens

Bien que les chiffres arabes (0-9) soient largement utilisés, de nombreuses régions arabophones préfèrent utiliser les chiffres arabo-indiens (٠‎-٩‎). Nous pouvons créer un style de compteur pour y parvenir :


@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Ce code définit un style de compteur nommé arabic-indic qui utilise les chiffres arabo-indiens comme symboles. La propriété suffix ajoute un point et un espace après chaque nombre. Le CSS applique ensuite ce style à une liste ordonnée (<ol>) pour afficher les nombres au format arabo-indien.

2. Chiffres romains (majuscules et minuscules)

Les chiffres romains sont couramment utilisés dans divers contextes, et les styles de compteurs CSS peuvent facilement les gérer :


@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Cet exemple montre comment créer des styles de compteurs en chiffres romains majuscules (upper-roman) et minuscules (lower-roman). Vous pouvez ensuite appliquer ces styles à différentes listes à l'aide de classes CSS (.upper-roman et .lower-roman). Par exemple :


<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3. Chiffres géorgiens

Les chiffres géorgiens utilisent un système unique de lettres. Nous pouvons définir un style de compteur pour représenter les nombres en géorgien :


@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Cet exemple utilise le système fixed car le système de numérotation géorgien possède un ensemble limité de symboles pour les 33 premiers nombres. La propriété range restreint le style de compteur aux valeurs comprises entre 1 et 33. Pour les nombres supérieurs à 33, vous devrez implémenter une logique plus complexe ou un système de numérotation différent.

4. Chiffres arméniens

Semblables au géorgien, les chiffres arméniens utilisent également des lettres pour représenter les nombres :


@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Cet exemple est similaire à l'exemple géorgien, utilisant le système fixed et définissant les lettres arméniennes comme symboles. La range est définie sur 1-39, couvrant l'ensemble de chiffres arméniens de base.

5. Chiffres CJK (chinois, japonais, coréen)

Les chiffres CJK offrent plus de complexité, avec différentes formes pour les contextes formels et informels, et différents niveaux de granularité. Examinons le chinois simplifié :


@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Notez qu'il s'agit d'une représentation simplifiée. La prise en charge complète des chiffres CJK, en particulier pour les grands nombres, nécessiterait une implémentation plus complexe impliquant le système additive et la gestion des valeurs de position (dizaines, centaines, milliers, etc.). Ce code montre la représentation numérique de base.

Techniques avancées et considérations

1. Combiner les styles de compteurs

Vous pouvez combiner plusieurs styles de compteurs pour créer des schémas de numérotation plus complexes. Par exemple, vous pouvez utiliser un compteur principal pour les chapitres et un compteur secondaire pour les sections au sein de chaque chapitre.


body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

Ce code crée un système de numérotation hiérarchique où les chapitres sont numérotés séquentiellement et les sections sont numérotées dans chaque chapitre (par exemple, 1.1, 1.2, 2.1, 2.2).

2. Considérations d'accessibilité

Assurez-vous que vos styles de compteurs sont accessibles aux utilisateurs handicapés. Utilisez la propriété speak-as pour contrôler la façon dont la valeur du compteur est annoncée par les lecteurs d'écran. Par exemple :


@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

La propriété speak-as : numbers ; indique au lecteur d'écran d'annoncer la valeur du compteur comme un nombre. Les autres options incluent spell-out (pour épeler le nombre) et bullets (pour annoncer le compteur comme des puces).

De plus, fournissez du texte de remplacement ou des descriptions pour tous les symboles personnalisés utilisés dans vos styles de compteurs afin de vous assurer que les utilisateurs ayant une déficience visuelle peuvent comprendre la signification du contenu numéroté.

3. Compatibilité des navigateurs

Bien que les styles de compteurs CSS soient largement pris en charge par les navigateurs modernes, il est essentiel de tenir compte des anciennes versions de navigateurs. Utilisez la propriété fallback pour spécifier un style de compteur de secours qui sera utilisé si le navigateur ne prend pas en charge le style principal. Par exemple :


@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

Dans cet exemple, si le navigateur ne prend pas en charge le système cyclic ou les symboles personnalisés, il reviendra au style de liste disc.

4. Sensibilité culturelle

Lors de la mise en œuvre de styles de compteurs pour différentes langues et cultures, soyez attentif aux sensibilités culturelles. Recherchez les conventions et les symboles de numérotation appropriés utilisés dans chaque région. Évitez d'utiliser des symboles ou des formats qui peuvent être offensants ou inappropriés.

Par exemple, certaines cultures peuvent préférer utiliser différents signes de ponctuation ou séparateurs dans leurs systèmes de numérotation. Assurez-vous que vos styles de compteurs respectent ces préférences.

Applications pratiques et cas d'utilisation

Les styles de compteurs CSS peuvent être utilisés dans une grande variété de scénarios de développement web, notamment :

Génération d'une table des matières : Numéroter automatiquement les titres et sous-titres dans une table des matières.
Création de listes numérotées : Formater les listes numérotées dans différentes langues et styles.
Numérotation des étapes d'un tutoriel : Guider les utilisateurs à travers une série d'étapes avec une numérotation claire et visuellement attrayante.
Mise en œuvre d'une pagination personnalisée : Créer des contrôles de pagination personnalisés avec des schémas de numérotation uniques.
Affichage des listes classées : Afficher les classements de manière visuellement attrayante à l'aide de différents styles de compteurs.
Génération de documents juridiques : Formater les documents juridiques avec des exigences de numérotation spécifiques.
Mise en forme de documents scientifiques : Afficher des équations, des figures et des tableaux avec une numérotation appropriée.

Meilleures pratiques pour l'utilisation des styles de compteurs CSS

Pour vous assurer que vos styles de compteurs CSS sont efficaces et maintenables, suivez ces meilleures pratiques :

Utilisez des noms descriptifs pour vos styles de compteurs : Choisissez des noms qui indiquent clairement le but et le formatage du style (par exemple, arabic-indic, upper-roman, georgian).
Conservez vos styles de compteurs modulaires : Définissez des styles de compteurs distincts pour différentes langues et systèmes de numérotation.
Utilisez des classes CSS pour appliquer des styles de compteurs : Évitez d'appliquer des styles de compteurs directement aux éléments ; utilisez plutôt des classes CSS pour contrôler le formatage.
Testez minutieusement vos styles de compteurs : Testez vos styles de compteurs dans différents navigateurs et appareils pour vous assurer qu'ils s'affichent correctement.
Documentez vos styles de compteurs : Fournissez une documentation claire pour vos styles de compteurs, y compris leur objectif, leur formatage et leur utilisation.
Donnez la priorité à l'accessibilité : Tenez toujours compte de l'accessibilité lors de la création de styles de compteurs et utilisez la propriété speak-as pour vous assurer que les valeurs de compteurs sont annoncées correctement par les lecteurs d'écran.

Conclusion

Les styles de compteurs CSS offrent un mécanisme puissant et flexible pour internationaliser le formatage du contenu numéroté sur le web. En tirant parti de la règle @counter-style et de ses diverses propriétés, vous pouvez créer des systèmes de numérotation personnalisés qui respectent les conventions culturelles et les nuances linguistiques de différentes régions. En suivant les meilleures pratiques décrites dans ce guide, vous pouvez vous assurer que vos styles de compteurs sont efficaces, maintenables et accessibles à un public mondial. Au fur et à mesure que le développement web continue d'évoluer, comprendre et utiliser les styles de compteurs CSS pour l'internationalisation deviendra de plus en plus important pour créer des expériences web véritablement inclusives et conviviales. Adoptez la puissance des styles de compteurs CSS et créez des sites web qui résonnent auprès des utilisateurs du monde entier.