Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction counters()

Description de la fonction counters().

La fonction counters() renvoie une numérotation hiérarchique. C'est à dire une numérotation à plusieurs niveaux, comme dans l'exemple ci-dessous.

  • 1 - Instruments à vent.
    • 1.1 - Trompette.
    • 1.2 - Saxophone.
  • 2 - Instruments à percussion.
    • 2.1 - Tambour.
    • 2.2 - Xylophone.

La fonction counters() peut être utilisée avec :

  • content : Ajoute du contenu dans le document.

Syntaxe de la fonction counters().

  • content: counters(cpt1, '.', decimal); n c t

    1. n est le nom du compteur. Celui devra être initialisé avec la propriété counter-reset et incrémenté avec la propriété counter-increment.
    2. c est le caractère qui sera utilisé pour séparer les différentes parties de la numérotation. C'est souvent le point, mais on peut envisager un tiret ou, plus rarement, plusieurs caractères.
    3. t est le type de numérotation à utiliser : decimal, lower-roman, lower-alpha, etc.
      Reportez vous à la description de la fonction counter() pour une description plus complète des types de numérotations prédéfinies.

Exemples.

Cliquez sur les exemples ci-dessous pour afficher le code CSS correspondant, ainsi que l'imbrication des balises ul et li, à bien respecter pour le fonctionnement des compteurs.

    ul
  • liDirectives :
      ul
    • li@charset/li
    • li@import/li
    • liEtc./li
    • /ul
    /li
  • liPropriétés :
      ul
    • liPropriétés raccourcies :
        ul
      • libackground/li
      • liborder/li
      • liEtc./li
      • /ul
      /li
    • liPropriétés individuelles :
        ul
      • libackground-image/li
      • libackground-color/li
      • liEtc./li
      /ul
    • /li
      /ul
    /li
  • liFonctions :
      ul
    • liurl()/li
    • licounter()/li
    • liEtc./li
    • /ul
  • /li /ul
    ul
  • liDirectives :
      ul
    • li@charset/li
    • li@import/li
    • liEtc./li
    • /ul
    /li
  • liPropriétés :
      ul
    • liPropriétés raccourcies :
        ul
      • libackground/li
      • liborder/li
      • liEtc./li
      • /ul
      /li
    • liPropriétés individuelles :
        ul
      • libackground-image/li
      • libackground-color/li
      • liEtc./li
      /ul
    • /li
      /ul
    /li
  • liFonctions :
      ul
    • liurl()/li
    • licounter()/li
    • liEtc./li
    • /ul
  • /li /ul

Compatibilité et prise en charge par les navigateurs.

Les navigateurs actuels traitent correctement les numérotations classiques (numeric, alphabetic...) mais il reste des problèmes de compatibilité avec les numérotations en langues exotiques.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Ajout de contenu - Propriétés.

  • content : Ajoute du contenu dans le document.
  • counter-increment : Définit le pas d'incrémentation d'un compteur.
  • counter-reset : Initialise un compteur.
  • hanging-punctuation : Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
  • quotes : Caractères utilisés pour les guillemets.

Ajout de contenu - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • counter() : Renvoie la valeur actuelle d'un compteur.

Listes à puces ou à numéros - Propriétés.

  • list-style : Résumé des caractéristiques de listes à puces ou numérotées.
  • list-style-image : Définit une image à utiliser à la place des puces.
  • list-style-position : Définit l'emplacement des marqueurs de listes (puces ou numéros).
  • list-style-type : Définit le type des puces ou de la numérotation.

Listes à puces ou à numéros - Directives.

Listes à puces ou à numéros - Fonctions.

  • counter() : Renvoie la valeur actuelle d'un compteur.
  • symbols() : Définit tous les paramètres d'une numérotation