counters()
==========

La fonction CSS **`counters()`** permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction `counters()` peut s'utiliser sous deux formes :

* `counters(name, string)`
* `counters(name, string, style)`

Cette fonction est généralement utilisée sur des pseudo-éléments mais peut théoriquement être utilisée à tout endroit où une valeur `<string>` est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera `decimal`).


```css
/\* Utilisation simple - style decimal par défaut \*/
counters(countername, '-');

/\* Changement du style d'affichage \*/
counters(countername, '.', upper-roman)
```


Un compteur n'est pas visible en tant que tel. Les fonctions `counters()` et `counter()` (en-US) doivent être utilisées pour créer du contenu.

**Note :** Bien que la fonction `counters()` puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que `content` reste experimentale.

Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.

Syntaxe
-------

### Valeurs

`<custom-ident>`

Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés `counter-reset` et `counter-increment`. Le nom ne peut pas commencer par deux tirets et ne peut pas être `none`, `unset`, `initial` ou `inherit`.

`<counter-style>`

Un style de compteur (cf. les valeurs décrites pour `list-style-type`) ou une fonction `symbols()`. En absence de valeur, le style utilisé sera `decimal`.

`<string>`

Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. `\000A9` représentera par exemple le symbole copyright (©).

`none`

Représente la chaîne vide.

### Syntaxe formelle
```

<counters()> =   
  counters( <counter-name> , <string> , <counter-style>? )    
  
<counter-style> =   
  <counter-style-name>  |  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>? [ <string> | <image> ]+ )    
  
<symbols-type> =   
  cyclic      |  
  numeric     |  
  alphabetic  |  
  symbolic    |  
  fixed         
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### Style par défaut et chiffres romains

#### HTML


```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == " counters(
      listCounter,
      ".",
      lower-roman
    );
}
```


#### Résultat

### *Numérotation décimale (avec zéro) et indices alphabétiques*

#### HTML


```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```


#### CSS


```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(
      count,
      ".",
      lower-alpha
    );
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser les compteurs CSS
* `counter-reset`
* `counter-increment`
* `@counter-style`
* La fonction CSS `counter()` (en-US)
* `::marker`