target-counter(), target-counters() et target-text() en CSS

Description des fonctions target-counter(), target-counters() et target-text().

Dans le cas d'un document long il est utile de créer un index pour faciliter la navigation. Ce peut être le cas d'une page volumineuse affichée à l'écran, ou d'un document imprimé sur plusieurs pages. L'index peut prendre la forme d'une table des matières, ou d'un menu. Les trois fonctions décrites sur cette page facilitent la mise en place de ce genre d'index.

• target-counter() : renvoie la valeur d'un compteur à l'endroit désigné par une adresse url partielle (le signet seulement).
• target-counters() : renvoie la valeur d'un compteur imbriqué à l'endroit désigné par une adresse url partielle.
• target-text() : renvoie le texte désigné par une adresse url partielle.

Ces fonctions peuvent être utilisées avec :

• content : Ajoute du contenu dans le document, principalement avec les sélecteurs ::before et ::after.

Syntaxe de ces fonctions.

• content: target-counter('#signet', compteur, decimal); url id f

  La fonction target-counter() renvoie la valeur d'un compteur à un emplacement particulier de la page. La fonction attend les trois paramètres décrits ci-dessous :

  1. url : un fragment d'url, c'est à dire la partie signet qui commence par un #. On ne peut donc faire référence qu'à un emplacement situé sur la même page.
  2. id est le nom d'un compteur.
  3. f est le format dans lequel la valeur du compteur doit être retournée. Ce paramètre est optionnel.
• content: target-counters('#signet', compteur, ' - ', decimal); url id s f

  La fonction target-counters() renvoie la valeur d'un compteur imbriqué à l'emplacement désigné par url. Cette fonction attend quatre paramètres, décrits ci-dessous :

  1. url : un fragment d'url, c'est à dire la partie signet qui commence par un #. On ne peut donc faire référence qu'à un emplacement situé sur la même page.
  2. id est le nom d'un compteur.
  3. s : un court texte qui sera inséré entre les valeurs des sous-compteurs.
  4. f est le format dans lequel la valeur du compteur doit être retournée. Ce paramètre est optionnel.
• content: target-text('#signet', content); url a

  La fonction target-text() renvoie le texte désigné par url. Elle attend deux paramètres, décrits ci-dessous :

  1. url : un signet (la partie finale d'une url, qui commence par un #). Les urls complètes ne sont pas acceptées : on ne peut faire référence qu'à un emplacement situé sur la même page.
  2. a peut prendre les valeurs suivantes : before, after, content, first-letter.

Exemple d'utilisation.

Un compteur est incrémenté par chacun des titres h2 de cette page. Les fonctions target-counter() et target-text() sont utilisées pour construire la table des matières ci-dessous.

Note : il s'agit pour l'instant d'une simulation, qui sera supprimée dès que ces fonctions seront correctement reconnues par les navigateurs.

• 2 - Description des fonctions target-counter(), target-counters() et target-text().
• 4 - Syntaxe de ces fonctions.
• 5 - Exemple d'utilisation.
• 7 - Voir aussi, dans le même module de standardisation que target-counter().

Compatibilité et prise en charge par les navigateurs.

Les fonctions target-counter(), target-counters() et target-text() sont encore mal reconnues par les navigateurs (2023). Il est impossible de les utiliser à l'heure actuelle.

Historique de la fonction target-counter().

• Module CSS - Contenu généré - Niveau 3

  Première spécification concernant les fonctions target-counter(), target-counters() et target-text().
  

  14 Mai 2003

  Document de travail.

  

  

  

Dans le même module de standardisation que target-counter().

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction target-counter() fait partie du module CSS Generated Content Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :